With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison.
For this article I want to present 10 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Either way I am sure designers & developers can find some use for some of the snippets in this collection.
31. CSS3 Glowing Inputs
input[type="text"],
textarea {
-webkit-transition: all 0.3 s ease-in-out;
-moz-transition: all 0.3 s ease-in-out;
-ms-transition: all 0.3 s ease-in-out;
-o-transition: all 0.3 s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #ddd;
}
input[type="text"]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
I really enjoy this basic custom CSS3 class because of how it overwrites the default browser behavior. Users of Chrome & Safari know about annoying input outlines in forms. Adding these properties into your stylesheet will setup a whole new design for basic input elements.
32. Style Links Based on Filetype
/* external links */
a[href^= "http://" ]
{
padding-right: 13px;
background: url ("external.gif") no-repeat center right;
} /* emails */
a[href^="mailto:"] {
padding-right: 20px;
background: url ("email.png") no-repeat center right;
} /* pdfs */
a[href$=".pdf"] {
padding-right: 18px;
background: url ("acrobat.png") no-repeat center right;
}
Quite the obscure bit of CSS but I love the creativity! You can determine the file type of your links using CSS selectors and implement icons as background images. These may include the various protocols (HTTP, FTP, IRC, mailto) or simply the file types themselves (mp3, avi, pdf).
33. Force Code Wraps
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
The typical pre tags are used in layouts to display large chunks of code. This is preformatted text like you would find inside Notepad or Textedit, except you’ll often notice long lines produce horizontal scrollbars. This block of CSS will force all pre tags to wrap code instead of breaking outside the container.
34. Force Hand Cursor over Clickable Items
a[href],
input[type="submit"],
input[type="image"],
label[for],
select,
button,
. pointer {
cursor: pointer;
}
There are lots of default clickable HTML elements which do not always display the hand pointer icon. Using this set of CSS selectors you may force the pointer over a number of key elements, along with any other objects using the class .pointer.
35. Webpage Top Box Shadow
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, . 8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, . 8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, . 8);
z-index: 100;
}
Developers may not find a great use for this other than some pleasing aesthetics. But I really enjoy this effect and it’s definitely something unique! Simply append this CSS code targeting your body element to display a dark drop shadow fading down from the top of your webpage.
36. CSS3 Speech Bubble
.chat-bubble {
background-color: #ededed;
border: 2px solid #666;
font-size: 35px;
line-height: 1.3em;
margin: 10px auto;
padding: 10px;
position: relative;
text-align: center;
width: 300px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
font-family: "Bangers", arial, serif;
}
.chat-bubble-arrow-border {
border-color: #666 transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -42px;
left: 30px;
}
.chat-bubble-arrow {
border-color: #ededed transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -39px;
left: 30px;
}
Numerous user interface purposes come to mind when discussing speech bubbles. These could be handy in discussion comments, or creating bulletin boards, or displaying quoted text. Simply add the following classes into your stylesheet and you can find related HTML codes from this CSS3 snippets post.
37. Default H1-H5 Headers
h 1,
h 2,
h 3,
h 4,
h 5 {
color: #005a9c;
}
h 1 {
font-size: 2.6em;
line-height: 2.45em;
}
h 2 {
font-size: 2.1em;
line-height: 1.9em;
}
h 3 {
font-size: 1.8em;
line-height: 1.65em;
}
h 4 {
font-size: 1.65em;
line-height: 1.4em;
}
h 5 {
font-size: 1.4em;
line-height: 1.25em;
}
I have offered lots of common syntax including browser CSS resets and a few HTML element resets. This template includes default styles for all major heading elements ranging from H1-H5. You may also consider adding H6 but I have never seen a website using all six nested headers.
38. Pure CSS Background Noise
body {
background-image: url
(
data: image/png;base 64,
iVBORw 0 KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp 4 XiDAAAAUVBMVEWFhYWDg 4 N 3 d
3 dtbW 17 e 3 t 1 dXWBgYGHh 4 d 5 eXlzc 3 OLi 4 ubm 5 uVlZWPj 4 + NjY 19
fX 2 JiYl/f 39 ra 2 uRkZGZmZlpaWmXl 5 dvb 29 xcXGTk 5 NnZ 2 c 8 TV 1
mAAAAG 3 RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR 4
XpWWB 67 c 2 BUFb 3 g 557 T/hRo 9 / WUMZHlgr 4 Bg 8 Z 4 qQgQJlHI 4 A 8
SzFVrapvmTF 9 O 7 dmYRFZ 60 YiBhJRCgh 1 FYhiLAmdvX 0 CzTOpNE 77 ME 0
Zty/nWWzchDtiqrmQDeuv 3 powQ 5 ta 2 eN 0 FY 0 InkqDD 73 lT 9 c 9
lEzwUNqgFHs 9 VQce 3 TVClFCQrSTfOiYkVJQBmpbq 2 L 6 iZavPnAPcoU 0 dSw 0
SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA 7 QiYAxi + IlPdqo + hYHnUt 5
ZPfnsHJyNiDtnpJyayNBkF 6 cWoYGAMY 92 U 2 hXHF/C 1 M 8 uP/ZtYdiuj 26
UdAdQQSXQErwSOMzt/XWRWAz 5 GuSBIkwG 1 H 3 FabJ 2 OsUOUhGC 6 tK 4 EMtJO 0
ttC 6 IBD 3 kM 0 ve 0 tJwMdSfjZo + EEISaeTr 9 P 3 wYrGjXqyC 1
krcKdhMpxEnt 5 JetoulscpyzhXN 5 FRpuPHvbeQaKxFAEB 6 EN + cYN 6 xD 7
RYGpXpNndMmZgM 5 Dcs 3 YSNFDHUo 2 LGfZuukSWyUYirJAdYbF 3 MfqEKmjM + I 2
EfhA 94 iG 3 L 7 uKrR + GdWD 73 ydlIB + 6 hgref 1 QTlmgmbM 3 / LeX 5 GI
1 Ux 1 RWpgxpLuZ 2 + I + IjzZ 8 wqE 4 nilvQdkUdfhzI 5 QDWy + kw 5 Wgg 2
pGpeEVeCCA 7 b 85 BO 3 F 9 DzxB 3 cdqvBzWcmzbyMiqhzuYqtHRVG 2 y 4 x +
KOlnyqla 8 AoWWpuBoYRxzXrfKuILl 6 SfiWCbjxoZJUaCBj 1 CjH 7 GIaDbc 9 kqBY
3 W/Rgjda 1 iqQcOJu 2 WW + 76 pZC 9 QG 7 M 00 dffe 9 hNnseupFL 53 r 8 F
7 YHSwJWUKP 2 q + k 7 RdsxyOB 11 n 0 xtOvnW 4 irMMFNV 4 H 0 uqwS 5 ExsmP
9 AxbDTc 9 JwgneAT 5 vTiUSm 1 E 7 BSflSt 3 bfa 1 tv 8 Di 3 R 8 n 3 Af 7
MNWzs 49 hmauE 2 wP + ttrq + AsWpFG 2 awvsuOqbipWHgtuvuaAE + A 1 Z/ 7 gC
9 hesnr + 7 wqCwG 8 c 5 yAg 3 AL 1 fm 8 T 9 AZtp/bbJGwl 1 pNrE 7 RuOX 7
PeMRUERVaPpEs + yqeoSmuOlokqw 49 pgomjLeh 7 icHNlG 19 yjs 6 XXOMedYm 5
xH 2 YxpV 2 tc 0 Ro 2 jJfxC 50 ApuxGob 7 lMsxfTbeUv 07 TyYxpeLucEH 1 gNd
4 IKH 2 LAg 5 TdVhlCafZvpskfncCfx 8 pOhJzd 76 bJWeYFnFciwcYfubRc 12
Ip/ppIhA 1 / mSZ/RxjFDrJC 5 xifFjJpY 2 Xl 5 zXdguFqYyTR 1 zSp 1 Y 9 p +
tktDYYSNflcxI 0 iyO 4 TPBdlRcpeqjK/piF 5 bklq 77 VSEaA + z 8
qmJTFzIWiitbnzR 794 USKBUaT 0 NTEsVjZqLaFVqJoPN 9 ODG 70 IPbfBHKK + /
q/AWR 0 tJzYHRULOa 4 MP + W/HfGadZUbfw 177 G 7 j/OGbIs 8 TahLyynl 4 X 4
RinF 793 Oz + BU 0 saXtUHrVBFT/DnA 3 ctNPoGbs 4 hRIjTok 8 i + algT 1
lTHi 4 SxFvONKNrgQFAq 2 / gFnWMXgwffgYMJpiKYkmW 3 tTg 3 ZQ 9 Jq + f 8
XN + A 5 eeUKHWvJWJ 2 sgJ 1 Sop + wwhqFVijqWaJhwtD 8 MNlSBeWNNWTa 5 Z 5
kPZw 5 + LbVT 99 wqTdx 29 lMUH 4 OIG/D 86 ruKEauBjvH 5 xy 6 um/Sfj 7 ei
6 UUVk 4 AIl 3 MyD 4 MSSTOFgSwsH/QJWaQ 5 as 7 ZcmgBZkzjjU 1 UrQ 74 ci 1
gWBCSGHtuV 1 H 2 mhSnO 3 Wp/ 3 fEV 5 a + 4 wz// 6 qy 8 JxjZsmxxy 5 + 4 w
9 CDNJY 09 T 072 iKG 0 EnOS 0 arEYgXqYnXcYHwjTtUNAcMelOd 4 xpkoqiTYICWFq
0 JSiPfPDQdnt + 4 / wuqcXY 47 QILbgAAAABJRU 5 ErkJggg==
);
background-color: #0094d0;
}
Designers have seen this effect added into websites for a long time, although they generally use repeating tile images with alpha-transparency. However we can embed Base64 code into CSS to generate brand new images. This is the case as in the snippet above which generates a small noise texture above the body background, or you can create a customized noise background over at NoiseTextureGenerator.
39. Continued List Ordering
ol.chapters {
list-style: none;
margin-left: 0;
}
ol.chapters > li:before {
content: counter (chapter) ". ";
counter-increment: chapter;
font-weight: bold;
float: left;
width: 40px;
}
ol.chapters li {
clear: left;
}
ol.start {
counter-reset: chapter;
}
ol.continue {
counter-reset: chapter 11;
}
I feel this may not be an extremely popular snippet, but it does have its market among developers. There may be situations where you’ll need to continue a list of items but split into two separate UL elements. Check out the code above for an awesome CSS-only fix.
40. CSS Tooltip Hovers
a {
border-bottom: 1px solid #bbb;
color: #666;
display: inline- block;
position: relative;
text-decoration: none;
}
a:hover,
a:focus {
color: #36c;
}
a:active {
top: 1px;
} /* Tooltip styling */
a[data-tooltip]:after {
border-top: 8px solid #222;
border-top: 8px solid hsla(0, 0%, 0%, . 85);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
display: none;
height: 0;
width: 0;
left: 25%;
position: absolute;
}
a[data-tooltip]:before {
background: #222;
background: hsla(0, 0%, 0%, . 85);
color: #f6f6f6;
content: attr (data-tooltip);
display: none;
font-family: sans-serif;
font-size: 14px;
height: 32px;
left: 0;
line-height: 32px;
padding: 0 15px;
position: absolute;
text-shadow: 0 1px 1px hsla(0, 0%, 0%, 1);
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
a[data-tooltip]:hover:after {
display: block;
top: -9px;
}
a[data-tooltip]:hover:before {
display: block;
top: -41px;
}
a[data-tooltip]:active:after {
top: -10px;
}
a[data-tooltip]:active:before {
top: -42px;
}
There are lots of open source jQuery-based tooltips which you can implement on your websites. But CSS-based tooltips are very rare, and this is one of my favorite snippets. Just copy this over into your stylesheet and using the new HTML5 data-attributes you can setup the tooltip text via data-tooltip.
Final Thoughts
The frontend style language for websites has grown into a majority controller on the World Wide Web. The W3C has put out public specs for HTML5 and CSS3, deeming them as the default languages for constructing websites. Both experienced and new developers should be able to enjoy this collection and hopefully find some useful codes.
All readers should be able to copy and save any of these snippets without a required attribution. Mostly all CSS codes released today are held under open source licenses and offered free, based on the publication. If you have thoughts or questions about this collection feel free to share with us in the comments discussion area below.