DJ Deck Controller using JAVASCRIPT, CSS, HTML

this is complete working script for DJ Controller on browser that allows you to select 2 tracks for DJing

Check this link in CODE PEN --- DJ Controller

CSS ROOT styling color schemes

How to Cater to People's Color Preferences>

The prefers-color-scheme media feature can be queried to serve up your user’s color scheme of choice. The light option is the go-to version if no active preference is set, and it has decent support across modern browsers.

Additionally, users reading on certain devices can also set light and dark color themes based on a schedule. For example, my phone uses light colors throughout its UI during the daytime, and dark colors at night. You can make your website follow suit.

Avoid repeating a lot of CSS by setting custom properties for your color themes on your :root pseudo-class. Create a version for each theme you wish to support. Here’s a quick example you can build on:

:root { color-scheme: light dark; } @media (prefers-color-scheme: light) { :root { --text-primary: #24292e; --background: white; --shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px 0px; } } @media (prefers-color-scheme: dark) { :root { --text-primary: white; --background: #24292e; --shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px 0px; } }

How to prevent mobile keyboard from rising footer over the Input / Content [solved]

Very simple keep POSITION: RELATIVE

footer { padding: 20px; text-align: center; left: 0; bottom: 0; position: relative; width: 100%; }

background 100% center css

Very simple apply body or container div

body { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Icon png image to black in css

If you want to convert icon png image to black using CSS just follow this

.xblack { -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */ filter: brightness(0%); }

CSS Clip-PathMaker - live code

If you are looking for CSS CLIP-PATH example code for polygon, hexagon, triangle or square or custom shape for your webiste - just check here for instant size & point co-ordinates --- Clip-Path Maker

Dot Leaders in Receipt Design CSS HTML

Dot leaders btw Description and Rate in HTML CSS

CSS Code
<style type="text/css"> ul li { width: 100%; } ul.leaders { max-width: 40em; padding: 0; overflow-x: hidden; list-style: none} ul.leaders li:before { float: left; width: 0; white-space: nowrap; content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "} ul.leaders span:first-child { padding-right: 0.33em; background: white} ul.leaders span + span { float: right; padding-left: 0.33em; background: white} </style>

HTML Cide
<ul class="leaders"> <li> <span>Base Fare</span> <span>$25.00</span> </li> <li> <span>Addl. PAX</span> <span>$20.00</span> </li> <li> <span>Child Seat</span> <span>$10.00</span> </li> <li> <span>Booster Seat</span> <span>$10.00</span> </li> <li> <span>Total Fare</span> <span>$65.00</span> </li> <li> <span>Discount (15%)</span> <span>$9.75</span> </li> <li> <span>Total Payable<br>(After Discount)</span> <span>$55.25</span> </li> </ul>

Taxi Website Designers.com

CSS Height by percentage - CSS Tricks [SOLVED]

if you have 2 DIV & want it different height in percentage

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body, html { margin: 0px auto; } #div1 { width:100%; height:70vh; background:#000; } #div2 { width: 100%; height: 30vh; background-color: red; } </style> </head> <body> <div id="div1">sadfsaf asf asdf as</div> <div id="div2">safasfasfsd afssa fsaf asdfsaf </div> </body> </html>

Google Autocomplete Font Size CSS - Solved

How to Change GOOGLE AUTOCOMPLETE drop-down FONT-SIZE???

.pac-item { font-size: 12px; color: #d9d9d9; font-family: Arial, Helvetica, sans-serif; }

HTML Checkbox size CSS

It is very simple

Do You Want To Get Married??? <style> /* input[type="checkbox"]{*/ #marry { width: 30px; /*Desired width*/ height: 30px; /*Desired height*/ cursor: pointer; -webkit-appearance: none; appearance: none; } </style>

Media Screen CSS Template

CSS Media Screen Template

@media screen and (max-width: 320px) { /* TODO: Modify styles for a phone in portrait */ } @media screen and (max-width: 480px) { /* TODO: Modify styles for a phone in landscape */ } @media screen and (max-width: 768px) { /* TODO: Modify styles for a tablet in portrait */ } @media screen and (max-width: 1024px) { /* TODO: Modify styles for a tablet in landscape */ }

Resize - Google ReCAPTCHA

Just Copy and Paste this css to resize values...

<style> #recaptcha_widget_div { width: 216px !important; overflow:hidden; } .recaptchatable #recaptcha_image { width:200px !important;margin-left:0px !important; padding-left:0px !important; } </style>

CSS Styling Scripts

Find some interesting CSS styling scripts without images and backgrounds

CSS Styling Scripts

Dynamic CSS Table Designing Techniques

Dynamic Table Designing Techniques

Progressive enhancement: pure CSS speech bubbles

Progressive enhancement: pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

css rounded corner box without images

rounded-corner-css-without-images
Dream-in-Code
Webkit / KHTML / MOZ - More examples

Well explained using jQuery techniques - compatible with all browsers -- Read More

rounder corner - css

Rounded Corner techniques with images and css script

http://virtuelvis.com/gallery/css/rounded/
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

WAP CSS / WCSS Tutorial

WAP CSS / WCSS Tutorial

WCSS (WAP CSS, also known as Wireless CSS or Wireless Profile CSS) is the cascading style sheet language that is used with XHTML MP. It is based on CSS2. Like XHTML MP, WCSS is defined in WAP 2.0.

At the beginning of our WCSS tutorial, we will mention about what WCSS is, the advantages and disadvantages of using WCSS on your WAP site, WCSS's syntax, etc. After that we will look at different ways to apply WCSS cascading style sheets to XHTML MP documents, WCSS selectors, and some of the commonly used WCSS properties. The last part of our WCSS tutorial includes an in depth coverage of the three WAP specific extensions to CSS2 and a brief discussion of how to detect the type of a user agent and apply the appropriate WCSS style sheet to it.