In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey. That’s where CSS and HTML snippets come to the rescue, offering a treasure trove of pre-made code segments that can be copied and pasted directly into your projects.
Here is a small curated collection of CSS/HTML snippets that are indispensable for our web designers.
How to Make Flexible Columns
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: white;
width: 12.5%; /* divide how many columns by 100*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 10px;
}
Add This To Your Page
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
How to Make A Responsive Grid
Thanks to W3Docs
<div id=”grid”>
<div><!– GRID ITEM 1 –>1</div>
<div><!– GRID ITEM 2 –>2</div>
<div><!– GRID ITEM 3 –>3</div>
<div><!– GRID ITEM 4 –>4</div>
<div><!– GRID ITEM 5 –>5</div>
<div><!– GRID ITEM 6 –>6</div>
</div>
Basic Box
.basicbox {
width:80%;
min-height:300px;
margin-left:10%;
padding:20px;
color:white;
font-size:1.9em;
background:#efefef;
border:solid 1px #ccc;
}
Basic Box H2
No Break Space
or
<p> </p>
Center
<div align=”center”></div>
Span Class
<span class=“xxx”></span>
Mailto
<a href=”mailto:johndoe@website.com”>Contact John</a>
Inline Style
<div style=”margin-left:50px;”></div>
or
<p style=”margin-left:50px;”></p>
Text Shadow
text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);
A Note About Text Shadows
rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
3 shadow settings (in the example shown as px, pixels) are:
X axis for centering left and right, Y axis for centering top and bottom, and the amount of blur.
(You can use negative numbers for the position and even apply multiple shadows at different positions and opacities for effect!)
Box Shadow
Example of a 3 color gradient of gold blending from top left to bottom right.
Text Links
a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #777;}
a:active {text-decoration: none; color: #444;}
Alternate Link Style
a.alt:link {text-decoration: none; color: #000; font-weight:bold;}
a.alt:visited {text-decoration: none; color: #000; font-weight:bold;}
a.alt:hover {text-decoration: none; color: #777; font-weight:bold;}
a.alt:active {text-decoration: none; color: #777; font-weight:bold;}
and the HTML is:
<a href=”yourlink.html” class=”alt”>link</a>
Text Styling
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #000;
letter-spacing: 0px;
line-height: 0px;
text-transform:uppercase;
text-transform:capitalize;
text-transform:lowercase;
Horizontal Rule
hr {background:#000; width:100px; height: 1px;}
Check out CSS Tricks for lots of great HR styles
Class vs. ID
The ID selector specifies a style for a unique element, defined with a “#“, #id_selector.
(Do not start an ID with a number)
The Class selector specifies a style for a group of elements, defined with a “.“, .class_selector.
Leave Yourself Notes/Comments In CSS
/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */
Leave Yourself Notes/Comments In HTML
<!– Enclosing a reminder about your HTML code within a –> <!– comment is a great idea –>
CSS Override (Add To The End Of A CSS String)
!important
Turn Off Element
display: none;
Turn Off Hyphenation
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
word-wrap: normal;
Gradient Backgrounds
background: rgb(110,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* IE10+ */
background: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6e0000′, endColorstr=’#b00010′,GradientType=0 ); /* IE6-9 */
Background Image No-Repeat
background-image: url(‘images/logo.png’);
background-repeat: no-repeat;
Float & Clear
If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.
<div style=”float:left;”> </div>
<div style=”float:right;”> </div>
<div style=”clear:left;”> </div>
<div style=”clear:right;”> </div>
<div style=”clear:both;”> </div>
Radius/Rounded Corners
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
border:1px solid #fff;
Text Selection Color
::-moz-selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}
::selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}
Override Inline Styles
Put the style into brackets [ ] to override.
[.stylename] {font-size: 12px;}
Disable links
pointer-events: none !important;
cursor: default !important;
.htaccess to display full file name of a directory without an index file
Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*
