UIUX Component

  Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }

A modal is a dialog box or popup window that is displayed on top of the current page, this modal only used HTML & CSS only without JavaScript. DEMO Pop Me! Modal Title × Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. HTML < div id = "wrapper" > < p >< a class = "button" href = "#popup" > Pop Me ! </ a ></ p > </ div > < div id = "popup" class = "overlayModal" > < a class = "cancel" href = "#" ></ a > < div class = "popup" > < h2 > Modal Title </ h2 > < a class = "close" href = "#" >& times; </ a > < div class = "content" >

  Flip card via HTML and CSS only. Short and simple, click on the the card below the see the animation. DEMO Front Back HTML < label > < input type = "checkbox" /> < div class = "card" > < article class = "front" > Front </ article > < article class = "back" > Back </ article > </ div > </ label > CSS label { - webkit - perspective: 1000 px; perspective: 1000 px; - webkit - transform - style: preserve - 3 d; transform - style: preserve - 3 d; display: block; width: 250 px; height: 200 px; cursor: pointer; } . card { position: relative; height: 100 % ; width: 100 % ; - webkit - transform - style: preserve - 3 d; transform - style: preserve - 3 d; - webkit - transition: all 600 ms; transition: all 600 ms; z - index: 20 ; border - radius: 10 px; } . card article { position:

Text editors make it easy to code without formatting issues corrupting it. For people new to programming learn the hard way that their first choice for coding causes problems with the code itself, such as not properly displaying formatting. Text editors shouldn't just be simple but also functional and good to work with. A text editor should be easy to use and do the job the way it was intended to be done. Below are the best top 5 text editors that should enough to make the job done. 1. Visual Studio Code Free. Built on open source. Runs everywhere.  Official Website 2. Brackets A modern, open source text editor that understands web design. Official Website 3. Sublime Text A sophisticated text editor for code, markup and prose. Official Website 4. Atom A hackable text editor for the 21st Century Official Website 5. Espresso For people who make delightful, innovative and fast websites, helps you write, code, design, build and publish with flair and efficiency.  Official Website