{"id":17203,"date":"2013-05-23T23:01:16","date_gmt":"2013-05-23T15:01:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17203"},"modified":"2024-01-31T14:52:29","modified_gmt":"2024-01-31T06:52:29","slug":"css-snippets-for-designers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-snippets-for-designers\/","title":{"rendered":"50 Useful CSS Snippets Every Designer Should Have"},"content":{"rendered":"

Keeping pace with the ever-evolving web design trends can be challenging. Web designers and front-end developers are deeply involved in exploring CSS3 properties<\/a>, ensuring cross-browser compatibility<\/a> and finding innovative solutions. However, many valuable CSS2 snippets also exist, often overshadowed by the newer ones.<\/p>\n

In this article, I\u2019m excited to share 50 useful CSS2\/CSS3 code snippets<\/strong> that are must-haves for web professionals. These snippets are great for integrating into your development IDE or keeping in a CSS file. They are practical tools that designers and developers will find invaluable in their work.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t20 Basic CSS Tips for Designers<\/a>\n\t\t\t\t<\/p>\n

\n

Table of Content:<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSS Resets<\/a><\/td>\nClassic Clearfix<\/a><\/td>\n<\/tr>\n
Updated Clearfix<\/a><\/td>\nCross-Browser Transparency<\/a><\/td>\n<\/tr>\n
Styling Blockquotes<\/a><\/td>\nRounded Corners in CSS<\/a><\/td>\n<\/tr>\n
Media Queries for Devices<\/a><\/td>\nModern Font Stacks<\/a><\/td>\n<\/tr>\n
Custom Text Selection Color<\/a><\/td>\nSEO-Friendly Text Hiding<\/a><\/td>\n<\/tr>\n
CSS3 Polaroid Effect<\/a><\/td>\nAnchor Link Styles<\/a><\/td>\n<\/tr>\n
Fancy CSS3 Pull-Quotes<\/a><\/td>\nFullscreen CSS3 Backgrounds<\/a><\/td>\n<\/tr>\n
Vertical Content Alignment<\/a><\/td>\nPersistent Vertical Scrollbars<\/a><\/td>\n<\/tr>\n
CSS3 Gradient Template<\/a><\/td>\n@font-face Rule<\/a><\/td>\n<\/tr>\n
CSS3 Stitched Look<\/a><\/td>\nCSS3 Zebra Stripes<\/a><\/td>\n<\/tr>\n
Elegant Ampersand Styling<\/a><\/td>\nDrop Cap Styling<\/a><\/td>\n<\/tr>\n
CSS3 Inner Shadow<\/a><\/td>\nCSS3 Outer Shadow<\/a><\/td>\n<\/tr>\n
Triangle List Bullets<\/a><\/td>\nCentered Fixed Width Layout<\/a><\/td>\n<\/tr>\n
CSS3 Text Columns<\/a><\/td>\nFixed Footer Styling<\/a><\/td>\n<\/tr>\n
Transparent PNG Fix for IE6<\/a><\/td>\nCross-Browser Minimum Height<\/a><\/td>\n<\/tr>\n
Glowing Input Fields<\/a><\/td>\nFile Type Link Styles<\/a><\/td>\n<\/tr>\n
Code Wrap in Pre Tags<\/a><\/td>\nHand Cursor on Clickables<\/a><\/td>\n<\/tr>\n
Top Page Shadow<\/a><\/td>\nCSS3 Speech Bubble<\/a><\/td>\n<\/tr>\n
H1-H5 Header Styling<\/a><\/td>\nBackground Noise Pattern<\/a><\/td>\n<\/tr>\n
Continued List Ordering<\/a><\/td>\nCSS Tooltips<\/a><\/td>\n<\/tr>\n
Dark Grey Buttons<\/a><\/td>\nURLs in Print View<\/a><\/td>\n<\/tr>\n
Disabling Webkit Highlights<\/a><\/td>\nPolka-Dot Pattern<\/a><\/td>\n<\/tr>\n
Checkered Pattern<\/a><\/td>\nGitHub Fork Ribbon<\/a><\/td>\n<\/tr>\n
Paper Curl Effect<\/a><\/td>\nGlowing Links<\/a><\/td>\n<\/tr>\n
CSS3 Feature Banner<\/a><\/td>\n<\/tr>\n<\/table>\n
\n

CSS Resets<\/h2>\n

Basic CSS resets are a staple found in many online resources. This snippet, which I\u2019ve customized, is inspired by Eric Meyer\u2019s reset codes<\/a>. It includes responsive image settings and applies the border-box<\/strong> model to all core elements for consistent margin and padding measurements.<\/p>\n

\r\n\/* Resetting Styles *\/\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var, b,\r\nu, i, center, dl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend, table, caption,\r\ntbody, tfoot, thead, tr, th, td, article,\r\naside, canvas, details, embed, figure, figcaption,\r\nfooter, header, hgroup, menu, nav, output,\r\nruby, section, summary, time, mark, audio, video {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  font-size: 100%;\r\n  font: inherit;\r\n  vertical-align: baseline;\r\n  outline: none;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* Set HTML height to 101% *\/\r\nhtml {\r\n  height: 101%;\r\n}\r\n\r\n\/* Basic Body Styles *\/\r\nbody {\r\n  font-size: 62.5%;\r\n  line-height: 1;\r\n  font-family: Arial, Tahoma, sans-serif;\r\n}\r\n\r\n\/* Block-Level Elements *\/\r\narticle, aside, details, figcaption, figure, footer, header,\r\nhgroup, menu, nav, section {\r\n  display: block;\r\n}\r\n\r\n\/* Lists *\/\r\nol, ul {\r\n  list-style: none;\r\n}\r\n\r\n\/* Quotes *\/\r\nblockquote, q {\r\n  quotes: none;\r\n}\r\n\r\nblockquote:before, blockquote:after, q:before, q:after {\r\n  content: '';\r\n  content: none;\r\n}\r\n\r\n\/* Strong Text *\/\r\nstrong {\r\n  font-weight: bold;\r\n}\r\n\r\n\/* Table Styles *\/\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\n\/* Images *\/\r\nimg {\r\n  border: 0;\r\n  max-width: 100%;\r\n}\r\n\r\n\/* Paragraph Styles *\/\r\np {\r\n  font-size: 1.2em;\r\n  line-height: 1.0em;\r\n  color: #333;\r\n}\r\n<\/pre>\n
\n
Classic CSS Clearfix Technique<\/h2>\n
This traditional CSS clearfix method is widely known among expert web developers. Use this clearfix class on a container that includes elements with float properties. It ensures that subsequent content is properly pushed down and cleared, rather than floating.<\/p>\n
\r\n\/* Clearfix *\/\r\n.clearfix:after {\r\n  content: \".\";\r\n  display: block;\r\n  clear: both;\r\n  visibility: hidden;\r\n  line-height: 0;\r\n  height: 0;\r\n}\r\n\r\n.clearfix {\r\n  display: inline-block;\r\n}\r\n\r\nhtml[xmlns] .clearfix {\r\n  display: block;\r\n}\r\n<\/pre>\n
\n
Updated Clearfix Approach<\/h2>\n
The newer version of clearfix doesn\u2019t show significant differences in how it\u2019s rendered compared to the classic method. Both versions effectively clear floats, ensuring compatibility across modern browsers, including older versions like Internet Explorer 6-8.<\/p>\n
\r\n\/* Clearfix and Container Styles *\/\r\n.clearfix:before, .container:after {\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.clearfix:after {\r\n  clear: both;\r\n}\r\n\r\n.clearfix {\r\n  zoom: 1;\r\n}\r\n<\/pre>\n
\n
Implementing Cross-Browser Transparency in CSS<\/h2>\n
While CSS3 properties like opacity are convenient, they\u2019re not universally compatible yet. By adding the filter property<\/strong>, you can ensure older Internet Explorer versions also display transparency correctly.<\/p>\n
\r\n\/* Transparent Class *\/\r\n.transparent {\r\n  filter: alpha(opacity=50); \/* Internet Explorer *\/\r\n  -khtml-opacity: 0.5; \/* KHTML, old Safari *\/\r\n  -moz-opacity: 0.5; \/* Mozilla, Netscape *\/\r\n  opacity: 0.5; \/* Firefox, Safari, Opera *\/\r\n}\r\n<\/pre>\n
\n
Styling CSS Blockquotes for Visual Appeal<\/h2>\n
Blockquotes are essential for highlighting quotes or specific content<\/strong> on blogs and web pages. This CSS snippet provides a basic yet appealing style for your blockquotes, making them stand out rather than blend in.<\/p>\n
\r\n\/* Blockquote Styles *\/\r\nblockquote {\r\n  background: #f9f9f9;\r\n  border-left: 10px solid #ccc;\r\n  margin: 1.5em 10px;\r\n  padding: .5em 10px;\r\n  quotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\r\n}\r\n\r\nblockquote:before {\r\n  color: #ccc;\r\n  content: open-quote;\r\n  font-size: 4em;\r\n  line-height: .1em;\r\n  margin-right: .25em;\r\n  vertical-align: -.4em;\r\n}\r\n\r\nblockquote p {\r\n  display: inline;\r\n}\r\n<\/pre>\n
\n
Creating Individually Rounded Corners with CSS<\/h2>\n
For developers looking to customize the rounded corners<\/strong> on elements, this code snippet is a lifesaver. It includes both a compact format and a detailed version, where each corner\u2019s radius is individually set.<\/p>\n
\r\n\/* Container Styles *\/\r\n#container {\r\n  -webkit-border-radius: 4px 3px 6px 10px;\r\n  -moz-border-radius: 4px 3px 6px 10px;\r\n  -o-border-radius: 4px 3px 6px 10px;\r\n  border-radius: 4px 3px 6px 10px;\r\n}\r\n\r\n#container {\r\n  -webkit-border-top-left-radius: 4px;\r\n  -webkit-border-top-right-radius: 3px;\r\n  -webkit-border-bottom-right-radius: 6px;\r\n  -webkit-border-bottom-left-radius: 10px;\r\n\r\n  -moz-border-radius-topleft: 4px;\r\n  -moz-border-radius-topright: 3px;\r\n  -moz-border-radius-bottomright: 6px;\r\n  -moz-border-radius-bottomleft: 10px;\r\n}\r\n<\/pre>\n
\n
Essential Media Queries for Various Devices<\/h2>\n
Find this comprehensive template on CSS-Tricks<\/a>, perfect for a wide range of media queries. It\u2019s fully equipped to target numerous real-world mobile devices, including retina-based devices using min-device-pixel-ratio<\/code>.<\/p>\n
\r\n\/* Smartphones (portrait and landscape) *\/\r\n@media only screen \r\nand (min-device-width : 320px) and (max-device-width : 480px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* Smartphones (landscape) *\/\r\n@media only screen and (min-width : 321px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* Smartphones (portrait) *\/\r\n@media only screen and (max-width : 320px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* iPads (portrait and landscape) *\/\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* iPads (landscape) *\/\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* iPads (portrait) *\/\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* Desktops and laptops *\/\r\n@media only screen and (min-width : 1224px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* Large screens *\/\r\n@media only screen and (min-width : 1824px) {\r\n  \/* Styles *\/\r\n}\r\n\r\n\/* iPhone 4 *\/\r\n@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {\r\n  \/* Styles *\/\r\n}\r\n<\/pre>\n
\n
Contemporary Font Stacks for Web Design<\/h2>\n
Selecting the right CSS font stacks for new webpages can be challenging. These examples provide a solid starting point. For more options, visit CSS Font Stacks<\/a>, a fantastic resource for web designers.<\/p>\n
\r\n\/* Times New Roman-based serif *\/\r\nfont-family: Cambria, \"Hoefler Text\", Utopia, \"Liberation Serif\", \"Nimbus Roman No9 L Regular\", Times, \"Times New Roman\", serif;\r\n\r\n\/* A modern Georgia-based serif *\/\r\nfont-family: Constantia, \"Lucida Bright\", Lucidabright, \"Lucida Serif\", Lucida, \"DejaVu Serif,\" \"Bitstream Vera Serif\", \"Liberation Serif\", Georgia, serif;\r\n\r\n\/* A traditional Garamond-based serif *\/\r\nfont-family: \"Palatino Linotype\", Palatino, Palladio, \"URW Palladio L\", \"Book Antiqua\", Baskerville, \"Bookman Old Style\", \"Bitstream Charter\", \"Nimbus Roman No9 L\", Garamond, \"Apple Garamond\", \"ITC Garamond Narrow\", \"New Century Schoolbook\", \"Century Schoolbook\", \"Century Schoolbook L\", Georgia, serif;\r\n\r\n\/* The Helvetica\/Arial-based sans serif *\/\r\nfont-family: Frutiger, \"Frutiger Linotype\", Univers, Calibri, \"Gill Sans\", \"Gill Sans MT\", \"Myriad Pro\", Myriad, \"DejaVu Sans Condensed\", \"Liberation Sans\", \"Nimbus Sans L\", Tahoma, Geneva, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n\r\n\/* The Verdana-based sans serif *\/\r\nfont-family: Corbel, \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"DejaVu Sans\", \"Bitstream Vera Sans\", \"Liberation Sans\", Verdana, \"Verdana Ref\", sans-serif;\r\n\r\n\/* The Trebuchet-based sans serif *\/\r\nfont-family: \"Segoe UI\", Candara, \"Bitstream Vera Sans\", \"DejaVu Sans\", \"Bitstream Vera Sans\", \"Trebuchet MS\", Verdana, \"Verdana Ref\", sans-serif;\r\n\r\n\/* The heavier \"Impact\" sans serif *\/\r\nfont-family: Impact, Haettenschweiler, \"Franklin Gothic Bold\", Charcoal, \"Helvetica Inserat\", \"Bitstream Vera Sans Bold\", \"Arial Black\", sans-serif;\r\n\r\n\/* The monospace *\/\r\nfont-family: Consolas, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\", \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", \"Liberation Mono\", \"Nimbus Mono L\", Monaco, \"Courier New\", Courier, monospace;\r\n<\/pre>\n
\n
Customizing Text Selection Color on Webpages<\/h2>\n
Modern browsers allow you to customize the highlight color on your webpages. While the default is light blue, you can choose any color. This snippet covers ::selection<\/code> along with vendor-specific prefixes for Webkit and Mozilla browsers.<\/p>\n
\r\n\/* Text Selection Styles *\/\r\n::selection {\r\n  background: #e2eae2;\r\n}\r\n\r\n::-moz-selection {\r\n  background: #e2eae2;\r\n}\r\n\r\n::-webkit-selection {\r\n  background: #e2eae2;\r\n}\r\n<\/pre>\n
\n
SEO-Friendly Technique for Hiding Text with a Logo<\/h2>\n
This method, first seen on the old Digg layout<\/a>, involves setting up an H1 tag with your site\u2019s name for SEO, while using CSS to hide the text and replace it with a custom logo image<\/strong>.<\/p>\n
\r\n\/* Header Logo Styles *\/\r\nh1 {\r\n  text-indent: -9999px;\r\n  margin: 0 auto;\r\n  width: 320px;\r\n  height: 85px;\r\n  background: transparent url(\"images\/logo.png\") no-repeat scroll;\r\n}\r\n<\/pre>\n
\n
CSS3 Polaroid Image Effect<\/h2>\n
By using the .polaroid<\/strong> class, you can give your images a nostalgic Polaroid-style effect with a prominent white border and subtle box shadows. Adjust the width and height to fit your images and layout.<\/p>\n
\r\n\/* Polaroid Image Styles *\/\r\nimg.polaroid {\r\n  background: #000; \/* Optional: Change to a background image or remove *\/\r\n  border: solid #fff;\r\n  border-width: 6px 6px 20px 6px;\r\n  box-shadow: 1px 1px 5px #333; \/* Standard blur at 5px. Increase for more depth *\/\r\n  -webkit-box-shadow: 1px 1px 5px #333;\r\n  -moz-box-shadow: 1px 1px 5px #333;\r\n  height: 200px; \/* Set to height of your image or desired size *\/\r\n  width: 200px; \/* Set to width of your image or desired size *\/\r\n}\r\n<\/pre>\n
\n
Styling Anchor Link States in CSS<\/h2>\n
While experienced CSS developers might be familiar with anchor link styles, this snippet is a handy reference for beginners. It covers the four primary states of an anchor link, useful for both newcomers and as a quick reminder.<\/p>\n
\r\n\/* Link Styles *\/\r\na:link {\r\n  color: blue;\r\n}\r\n\r\n\/* Visited Link Styles *\/\r\na:visited {\r\n  color: purple;\r\n}\r\n\r\n\/* Hovered Link Styles *\/\r\na:hover {\r\n  color: red;\r\n}\r\n\r\n\/* Active Link Styles *\/\r\na:active {\r\n  color: yellow;\r\n}\r\n<\/pre>\n
\n
Creating Fancy CSS3 Pull-Quotes<\/h2>\n
Pull-quotes, distinct from blockquotes, are designed to stand out alongside your blog or article content. This default class comes with basic properties and offers three unique font family options to enhance the visual appeal of pull-quotes.<\/p>\n
\r\n\/* Pullquote Styles *\/\r\n.has-pullquote:before {\r\n  \/* Reset metrics *\/\r\n  padding: 0;\r\n  border: none;\r\n\r\n  \/* Content *\/\r\n  content: attr(data-pullquote);\r\n\r\n  \/* Pull out to the right, with margins *\/\r\n  float: right;\r\n  width: 320px;\r\n  margin: 12px -140px 24px 36px;\r\n\r\n  \/* Baseline correction *\/\r\n  position: relative;\r\n  top: 5px;\r\n\r\n  \/* Typography *\/\r\n  font-size: 23px;\r\n  line-height: 30px;\r\n}\r\n\r\n\/* Pullquote Adelle Styles *\/\r\n.pullquote-adelle:before {\r\n  font-family: \"adelle-1\", \"adelle-2\";\r\n  font-weight: 100;\r\n  top: 10px !important;\r\n}\r\n\r\n\/* Pullquote Helvetica Styles *\/\r\n.pullquote-helvetica:before {\r\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\r\n  font-weight: bold;\r\n  top: 7px !important;\r\n}\r\n\r\n\/* Pullquote Facit Styles *\/\r\n.pullquote-facit:before {\r\n  font-family: \"facitweb-1\", \"facitweb-2\", Helvetica, Arial, sans-serif;\r\n  font-weight: bold;\r\n  top: 7px !important;\r\n}\r\n<\/pre>\n
\n
CSS3 Fullscreen Backgrounds<\/h2>\n
Note that this code might not function correctly in older browsers lacking CSS3 support. However, for modern designs, it\u2019s an excellent solution for incorporating large, resizable, and fixed scrolling background photographs into your website.<\/p>\n
\r\n\/* HTML Background Styles *\/\r\nhtml {\r\n  background: url('images\/bg.jpg') no-repeat center center fixed;\r\n  -webkit-background-size: cover;\r\n  -moz-background-size: cover;\r\n  -o-background-size: cover;\r\n  background-size: cover;\r\n}\r\n<\/pre>\n
\n
Centrally Aligning Content Vertically<\/h2>\n
Centering content horizontally is straightforward, but vertically aligning it can be more challenging, especially when considering scrollbars and other factors. This CSS solution offers a hassle-free way to center content vertically without using JavaScript.<\/p>\n
\r\n\/* Container Styles *\/\r\n.container {\r\n  min-height: 6.5em;\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n}\r\n<\/pre>\n
\n
Ensuring Persistent Vertical Scrollbars<\/h2>\n
When your page content doesn\u2019t fill the entire height of the browser window, scrollbars may not appear. However, this snippet ensures that the HTML element is always slightly taller than the browser, maintaining the presence of vertical scrollbars at all times.<\/p>\n
\r\n\/* HTML Styles *\/\r\nhtml {\r\n  height: 101%;\r\n}\r\n<\/pre>\n
\n
CSS3 Gradient Template<\/h2>\n
CSS3 gradients add a dynamic element to web design. This template covers various vendor prefixes, saving time and ensuring cross-browser compatibility for gradient effects.<\/p>\n
\r\n\/* Colorbox Styles *\/\r\n#colorbox {\r\n  background: #629721;\r\n  background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));\r\n  background-image: -webkit-linear-gradient(top, #83b842, #629721);\r\n  background-image: -moz-linear-gradient(top, #83b842, #629721);\r\n  background-image: -ms-linear-gradient(top, #83b842, #629721);\r\n  background-image: -o-linear-gradient(top, #83b842, #629721);\r\n  background-image: linear-gradient(top, #83b842, #629721);\r\n}\r\n<\/pre>\n
\n
Using the @font-face Rule in CSS3<\/h2>\n
This @font-face example is a handy reference for embedding custom TTF, OTF, SVG, and WOFF font files into websites. Use this template as a foundation for incorporating unique font families in your web design projects.<\/p>\n
\r\n\/* Define Web Font *\/\r\n@font-face {\r\n  font-family: 'MyWebFont';\r\n  src: url('webfont.eot'); \/* IE9 Compat Modes *\/\r\n  src: url('webfont.eot?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\r\n       url('webfont.woff') format('woff'), \/* Modern Browsers *\/\r\n       url('webfont.ttf') format('truetype'), \/* Safari, Android, iOS *\/\r\n       url('webfont.svg#svgFontName') format('svg'); \/* Legacy iOS *\/\r\n}\r\n\r\n\/* Body Styles with Web Font *\/\r\nbody {\r\n  font-family: 'MyWebFont', Arial, sans-serif;\r\n}\r\n<\/pre>\n
\n
Stitched Look with CSS3<\/h2>\n
This CSS code styles paragraph elements with a red background, white text, and a white dashed border inside a shadowed box, while also styling links within paragraphs to be white with an underline on hover, focus, or active state.<\/p>\n
\r\n\/* Paragraph Styles *\/\r\np {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 10px;\r\n  margin: 10px;\r\n  font-size: 21px;\r\n  line-height: 1.3em;\r\n  color: #fff;\r\n  background: #ff0030;\r\n  -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10, 10, 0, .5);\r\n  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10, 10, 0, .5);\r\n  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, .5);\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n}\r\n\r\n\/* Paragraph Border Styles *\/\r\np:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 3px;\r\n  bottom: 3px;\r\n  left: 3px;\r\n  right: 3px;\r\n  border: 2px dashed #fff;\r\n}\r\n\r\n\/* Paragraph Link Styles *\/\r\np a {\r\n  color: #fff;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Paragraph Link Hover, Focus, and Active Styles *\/\r\np a:hover, p a:focus, p a:active {\r\n  text-decoration: underline;\r\n}\r\n<\/pre>\n
\n
Enhancing Tables with CSS3 Zebra Stripes<\/h2>\n
Zebra stripes in tables enhance readability, especially in large data sets. This CSS trick colors odd rows differently, aiding users in aligning cells with the correct rows.<\/p>\n
\r\n\/* Odd-Numbered Rows in tbody *\/\r\ntbody tr:nth-child(odd) {\r\n  background-color: #ccc;\r\n}\r\n<\/pre>\n
\n
Styling the Ampersand with Elegance<\/h2>\n
This class, applied to a span element around an ampersand, enhances its appearance with classic serif fonts and italics, giving a touch of elegance to your web content.<\/p>\n
\r\n\/* Amp Styles *\/\r\n.amp {\r\n  font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;\r\n  font-style: italic;\r\n  font-weight: normal;\r\n}\r\n<\/pre>\n
\n
Drop Cap Effect for Paragraphs<\/h2>\n
Often seen in print media, drop caps can add a sophisticated touch to web pages or blogs. This CSS rule targets the first letter of paragraphs to create a drop cap effect, enhancing the visual appeal of your content.<\/p>\n
\r\n\/* First Letter of Paragraph Styles *\/\r\np:first-letter {\r\n  display: block;\r\n  margin: 5px 0 0 5px;\r\n  float: left;\r\n  color: #ff3366;\r\n  font-size: 5.4em;\r\n  font-family: Georgia, Times New Roman, serif;\r\n}\r\n<\/pre>\n
\n
Inner Shadow Effect with CSS3<\/h2>\n
Box shadow properties transform website design, adding depth and character to elements. This code snippet creates an inner shadow, a sophisticated effect that, when used appropriately, can enhance the aesthetics of your design.<\/p>\n
\r\n#mydiv {\r\n  -moz-box-shadow: inset 2px 0 4px #000;\r\n  -webkit-box-shadow: inset 2px 0 4px #000;\r\n  box-shadow: inset 2px 0 4px #000;\r\n}\r\n<\/pre>\n
\n
Outer Shadow Effect with CSS3<\/h2>\n
Complementing inner shadows, outer shadows add another dimension to your web elements. The blur and spread parameters in the syntax can be adjusted for different effects. Learn more about these values at W3Schools<\/a>.<\/p>\n
\r\n#mydiv {\r\n  -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n  -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n}\r\n<\/pre>\n
\n
CSS3 Triangle-Shaped List Bullets<\/h2>\n
Creating triangle-shaped bullets in CSS3 is a unique technique that looks impressive in modern browsers. Although it lacks support for fallback methods, it\u2019s a creative way to style lists for an enhanced visual impact.<\/p>\n
\r\nul {\r\n  margin: 0.75em 0;\r\n  padding: 0 1em;\r\n  list-style: none;\r\n}\r\n\r\nli:before {\r\n  content: \"\";\r\n  border-color: transparent #111;\r\n  border-style: solid;\r\n  border-width: 0.35em 0 0.35em 0.45em;\r\n  display: block;\r\n  height: 0;\r\n  width: 0;\r\n  left: -1em;\r\n  top: 0.9em;\r\n  position: relative;\r\n}\r\n<\/pre>\n
\n
Creating a Centered Layout with Fixed Width<\/h2>\n
Earlier, we discussed horizontal positioning. Here\u2019s a quick snippet<\/strong> for horizontally centering a fixed-width layout, ensuring your page content is perfectly aligned.<\/p>\n
\r\n#page-wrap {\r\n  width: 800px;\r\n  margin: 0 auto;\r\n}\r\n<\/pre>\n
\n
Implementing CSS3 Text Columns<\/h2>\n
Use CSS3 columns to divide text into multiple, evenly distributed sections, enhancing the layout and readability of your website. This snippet allows for any number of columns, aligning your text neatly within each.<\/p>\n
\r\n#columns-3 {\r\n  text-align: justify;\r\n  -moz-column-count: 3;\r\n  -moz-column-gap: 12px;\r\n  -moz-column-rule: 1px solid #c4c8cc;\r\n  -webkit-column-count: 3;\r\n  -webkit-column-gap: 12px;\r\n  -webkit-column-rule: 1px solid #c4c8cc;\r\n}\r\n<\/pre>\n
\n
Styling a Fixed Footer with CSS<\/h2>\n
Adding a fixed footer to your website can be more beneficial than it seems. It scrolls with the user, providing easy access to useful information or contact details. This technique is best used when it enhances the user experience.<\/p>\n
\r\n#footer {\r\n  position: fixed;\r\n  left: 0px;\r\n  bottom: 0px;\r\n  height: 30px;\r\n  width: 100%;\r\n  background: #444;\r\n}\r\n\r\n\/* IE 6 *\/\r\nposition: absolute;\r\ntop: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');\r\n<\/pre>\n
\n
Fix for Transparent PNGs in IE6<\/h2>\n
Transparent PNGs are common in web design, but older versions of Internet Explorer don\u2019t support their transparency. This CSS snippet provides a workaround for IE6, ensuring transparent PNGs display correctly.<\/p>\n
\r\n.bg {\r\n  width: 200px;\r\n  height: 100px;\r\n  background: url(\/folder\/yourimage.png) no-repeat;\r\n  _background: none;\r\n  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\/folder\/yourimage.png', sizingMethod='crop');\r\n}\r\n\r\n\/* 1px gif method *\/\r\nimg, .png {\r\n  position: relative;\r\n  behavior: expression((this.runtimeStyle.behavior=\"none\")&&(this.pngSet?this.pngSet=true:(this.nodeName == \"IMG\" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = \"none\",\r\n  this.runtimeStyle.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\" + this.src + \"', sizingMethod='image')\",\r\n  this.src = \"images\/transparent.gif\"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url(\"','').replace('\")',''),\r\n  this.runtimeStyle.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\" + this.origBg + \"', sizingMethod='crop')\",\r\n  this.runtimeStyle.backgroundImage = \"none\")),this.pngSet=true));\r\n}\r\n<\/pre>\n
\n
Ensuring Minimum Height Cross-Browser Compatibility<\/h2>\n
Working with `min-height` can be tricky due to inconsistent browser support. This code ensures compatibility across browsers, including older versions of Internet Explorer and Firefox, for reliable minimum height styling.<\/p>\n
\r\n#container {\r\n  min-height: 550px;\r\n  height: auto !important;\r\n  height: 550px;\r\n}\r\n<\/pre>\n
\n
Glowing Input Fields in CSS3<\/h2>\n
This CSS3 class alters default browser input outlines, particularly noticeable in Chrome and Safari. It introduces a glowing effect to input fields, enhancing the user interface with a modern, interactive design.<\/p>\n
\r\ninput[type=text], textarea {\r\n  -webkit-transition: all 0.30s ease-in-out;\r\n  -moz-transition: all 0.30s ease-in-out;\r\n  -ms-transition: all 0.30s ease-in-out;\r\n  -o-transition: all 0.30s ease-in-out;\r\n  outline: none;\r\n  padding: 3px 0px 3px 3px;\r\n  margin: 5px 1px 3px 0px;\r\n  border: 1px solid #ddd;\r\n}\r\n\r\ninput[type=text]:focus, textarea:focus {\r\n  box-shadow: 0 0 5px rgba(81, 203, 238, 1);\r\n  padding: 3px 0px 3px 3px;\r\n  margin: 5px 1px 3px 0px;\r\n  border: 1px solid rgba(81, 203, 238, 1);\r\n}\r\n<\/pre>\n
\n
Custom Link Styles Based on File Type<\/h2>\n
This creative CSS technique allows styling links based on their file type or protocol using CSS selectors. It enhances user experience by visually indicating the type of content linked, such as external links, email addresses, or PDF files.<\/p>\n
\r\n\/* external links *\/\r\na[href^=\"http:\/\"] {\r\n  padding-right: 13px;\r\n  background: url('external.gif') no-repeat center right;\r\n}\r\n\r\n\/* emails *\/\r\na[href^=\"mailto:\"] {\r\n  padding-right: 20px;\r\n  background: url('email.png') no-repeat center right;\r\n}\r\n\r\n\/* pdfs *\/\r\na[href$=\".pdf\"] {\r\n  padding-right: 18px;\r\n  background: url('acrobat.png') no-repeat center right;\r\n}\r\n<\/pre>\n
\n
Automatically Wrapping Code in Pre Tags<\/h2>\n
Preformatted text within pre tags often causes horizontal scrollbars due to long lines. This CSS code ensures that the text within these tags wraps<\/strong>, thus avoiding overflow and preserving readability.<\/span><\/p>\n
\r\npre {\r\n  white-space: pre-wrap;     \/* CSS3 *\/\r\n  white-space: -moz-pre-wrap; \/* Mozilla, since 1999 *\/\r\n  white-space: -pre-wrap;     \/* Opera 4-6 *\/\r\n  white-space: -o-pre-wrap;   \/* Opera 7 *\/\r\n  word-wrap: break-word;      \/* Internet Explorer 5.5+ *\/\r\n}\r\n<\/pre>\n
\n
Custom Cursor for Clickable Elements<\/h2>\n
Not all clickable HTML elements display the hand pointer icon by default. This CSS snippet ensures that a hand cursor appears over various clickable elements, including any item with the class .pointer<\/strong>, enhancing user interaction.<\/p>\n
\r\na[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n
\n
Top Page Shadow for Aesthetic Effect<\/h2>\n
This CSS snippet adds a unique visual touch to your webpage: a subtle shadow that fades from the top. It\u2019s an easy way to enhance the aesthetics of your site with minimal effort.<\/p>\n
\r\nbody:before {\r\n  content: \"\";\r\n  position: fixed;\r\n  top: -10px;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 10px;\r\n  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);\r\n  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);\r\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);\r\n  z-index: 100;\r\n}\r\n<\/pre>\n
\n
CSS3 Speech Bubble Design<\/h2>\n
Speech bubbles are versatile UI elements, useful in discussions, bulletin boards, or for displaying quotes. This CSS3 class creates an attractive speech bubble, easily integrated into various web design contexts.<\/p>\n
\r\n.chat-bubble {\r\n  background-color: #ededed;\r\n  border: 2px solid #666;\r\n  font-size: 35px;\r\n  line-height: 1.3em;\r\n  margin: 10px auto;\r\n  padding: 10px;\r\n  position: relative;\r\n  text-align: center;\r\n  width: 300px;\r\n  -moz-border-radius: 20px;\r\n  -webkit-border-radius: 20px;\r\n  -moz-box-shadow: 0 0 5px #888;\r\n  -webkit-box-shadow: 0 0 5px #888;\r\n  font-family: 'Bangers', arial, serif;\r\n}\r\n\r\n.chat-bubble-arrow-border {\r\n  border-color: #666 transparent transparent transparent;\r\n  border-style: solid;\r\n  border-width: 20px;\r\n  height: 0;\r\n  width: 0;\r\n  position: absolute;\r\n  bottom: -42px;\r\n  left: 30px;\r\n}\r\n\r\n.chat-bubble-arrow {\r\n  border-color: #ededed transparent transparent transparent;\r\n  border-style: solid;\r\n  border-width: 20px;\r\n  height: 0;\r\n  width: 0;\r\n  position: absolute;\r\n  bottom: -39px;\r\n  left: 30px;\r\n}\r\n<\/pre>\n
\n
Styling Default Headers from H1 to H5<\/h2>\n
This template provides default styles for major heading elements from H1 to H5<\/strong>, giving them a uniform color and varying sizes. While H6 is also available, it\u2019s less commonly used in most website designs.<\/p>\n
\r\nh1, h2, h3, h4, h5 {\r\n  color: #005a9c;\r\n}\r\n\r\nh1 {\r\n  font-size: 2.6em;\r\n  line-height: 2.45em;\r\n}\r\n\r\nh2 {\r\n  font-size: 2.1em;\r\n  line-height: 1.9em;\r\n}\r\n\r\nh3 {\r\n  font-size: 1.8em;\r\n  line-height: 1.65em;\r\n}\r\n\r\nh4 {\r\n  font-size: 1.65em;\r\n  line-height: 1.4em;\r\n}\r\n\r\nh5 {\r\n  font-size: 1.4em;\r\n  line-height: 1.25em;\r\n}\r\n<\/pre>\n
\n
Creating Background Noise with Pure CSS<\/h2>\n
Adding a noise texture to your webpage\u2019s background can be achieved using CSS alone. This snippet embeds Base64 code to generate a subtle noise effect, creating a stylish backdrop without the need for external images. Customize your noise texture at NoiseTextureGenerator<\/a> for more personalization.<\/p>\n
\r\nbody {\r\n  background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl\/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T\/hRo9\/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty\/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz\/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF\/C1M8uP\/ZtYdiuj26UdAdQQSXQErwSOMzt\/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXp\/ndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3\/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W\/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z\/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp\/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip\/ppIhA1\/mSZ\/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK\/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+\/q\/AWR0tJzYHRULOa4MP+W\/HfGadZUbfw177G7j\/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT\/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2\/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG\/D86ruKEauBjvH5xy6um\/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH\/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp\/3fEV5a+4wz\/\/6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4\/wuqcXY47QILbgAAAABJRU5ErkJggg==);\r\n  background-color: #0094d0;\r\n}\r\n<\/pre>\n
\n
Sequentially Continuing Ordered Lists<\/h2>\n
This CSS snippet is perfect for times when you need to split an ordered list into multiple sections<\/strong> while maintaining a continuous count. It\u2019s a simple, CSS-only solution to seamlessly continue list numbering across different list elements.<\/p>\n
\r\nol.chapters {\r\n  list-style: none;\r\n  margin-left: 0;\r\n}\r\n\r\nol.chapters > li:before {\r\n  content: counter(chapter) \". \";\r\n  counter-increment: chapter;\r\n  font-weight: bold;\r\n  float: left;\r\n  width: 40px;\r\n}\r\n\r\nol.chapters li {\r\n  clear: left;\r\n}\r\n\r\nol.start {\r\n  counter-reset: chapter;\r\n}\r\n\r\nol.continue {\r\n  counter-reset: chapter 11;\r\n}\r\n<\/pre>\n
\n
Creating CSS Tooltips with Hover Effects<\/h2>\n
While there are many jQuery-based tooltips available, CSS-based tooltips are less common. This snippet is a favorite of mine. Implement it into your stylesheet, and you can easily set up tooltips using HTML5 data attributes and the data-tooltip<\/code> property.<\/p>\n
\r\na { \r\n  border-bottom: 1px solid #bbb;\r\n  color: #666;\r\n  display: inline-block;\r\n  position: relative;\r\n  text-decoration: none;\r\n}\r\n\r\na:hover,\r\na:focus {\r\n  color: #36c;\r\n}\r\n\r\na:active {\r\n  top: 1px; \r\n}\r\n\r\n\/* Tooltip styling *\/\r\na[data-tooltip]:after {\r\n  border-top: 8px solid #222;\r\n  border-top: 8px solid hsla(0, 0%, 0%, 0.85);\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  content: \"\";\r\n  display: none;\r\n  height: 0;\r\n  width: 0;\r\n  left: 25%;\r\n  position: absolute;\r\n}\r\n\r\na[data-tooltip]:before {\r\n  background: #222;\r\n  background: hsla(0, 0%, 0%, 0.85);\r\n  color: #f6f6f6;\r\n  content: attr(data-tooltip);\r\n  display: none;\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n  height: 32px;\r\n  left: 0;\r\n  line-height: 32px;\r\n  padding: 0 15px;\r\n  position: absolute;\r\n  text-shadow: 0 1px 1px hsla(0, 0%, 0%, 1);\r\n  white-space: nowrap;\r\n  -webkit-border-radius: 5px;\r\n  -moz-border-radius: 5px;\r\n  -o-border-radius: 5px;\r\n  border-radius: 5px;\r\n}\r\n\r\na[data-tooltip]:hover:after {\r\n  display: block;\r\n  top: -9px;\r\n}\r\n\r\na[data-tooltip]:hover:before {\r\n  display: block;\r\n  top: -41px;\r\n}\r\n\r\na[data-tooltip]:active:after {\r\n  top: -10px;\r\n}\r\n\r\na[data-tooltip]:active:before {\r\n  top: -42px;\r\n}\r\n<\/pre>\n
\n
Stylish Dark Grey Rounded Buttons in CSS3<\/h2>\n
Providing a simple CSS3 button design, this .graybtn<\/strong> class is ideal for dark grey rounded buttons. The class name reflects the color style, but you can modify the hex values to match your website\u2019s color scheme. This template offers a starting point for a variety of button designs.<\/p>\n
\r\n.graybtn {\r\n  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;\r\n  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;\r\n  box-shadow: inset 0px 1px 0px 0px #ffffff;\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1));\r\n  background: -moz-linear-gradient(center top, #ffffff 5%, #d1d1d1 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');\r\n  background-color: #ffffff;\r\n  -moz-border-radius: 6px;\r\n  -webkit-border-radius: 6px;\r\n  border-radius: 6px;\r\n  border: 1px solid #dcdcdc;\r\n  display: inline-block;\r\n  color: #777777;\r\n  font-family: arial;\r\n  font-size: 15px;\r\n  font-weight: bold;\r\n  padding: 6px 24px;\r\n  text-decoration: none;\r\n  text-shadow: 1px 1px 0px #ffffff;\r\n}\r\n\r\n.graybtn:hover {\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff));\r\n  background: -moz-linear-gradient(center top, #d1d1d1 5%, #ffffff 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');\r\n  background-color: #d1d1d1;\r\n}\r\n\r\n.graybtn:active {\r\n  position: relative;\r\n  top: 1px;\r\n}\r\n<\/pre>\n
\n
Displaying URLs in Printed Web Pages<\/h2>\n
For websites with print-friendly content, this CSS snippet is incredibly useful. Links on your webpage will appear normally, but when printed, the URLs will be displayed alongside the link text. This feature is particularly handy for readers who need to access hyperlinked pages from a printed document but cannot see the URLs normally<\/strong>.<\/p>\n
\r\n@media print { \r\n  a:after { \r\n    content: \" [\" attr(href) \"] \"; \r\n  } \r\n}\r\n<\/pre>\n
\n
Disabling Mobile Webkit Highlights<\/h2>\n
In mobile Safari and other Webkit-based browsers, a grey box often appears around tapped elements. This CSS snippet removes all native mobile browser highlights<\/strong>, offering a cleaner and more consistent user experience.<\/p>\n
\r\nbody {\r\n  -webkit-touch-callout: none;\r\n  -webkit-user-select: none;\r\n  -khtml-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n<\/pre>\n
\n
Creating a CSS3 Polka-Dot Pattern<\/h2>\n
This interesting CSS3 snippet allows you to generate a polka-dot pattern on any element, targeted here at the body element. It\u2019s a quick and efficient way to add a playful background pattern to your webpage without the need for external images.<\/p>\n
\r\nbody {\r\n  background: radial-gradient(circle, white 10%, transparent 10%),\r\n              radial-gradient(circle, white 10%, black 10%) 50px 50px;\r\n  background-size: 100px 100px;\r\n}\r\n<\/pre>\n
\n
Seamless CSS3 Checkered Pattern<\/h2>\n
Similar to polka dots, this snippet creates a seamless checkerboard pattern. It\u2019s a bit more complex but renders beautifully in CSS3-supported browsers. The color scheme can be adjusted to fit your website\u2019s aesthetic.<\/p>\n
\r\nbody {\r\n  background-color: white;\r\n  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), \r\n                    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);\r\n  background-size: 100px 100px;\r\n  background-position: 0 0, 50px 50px;\r\n}\r\n<\/pre>\n
\n
Stylish GitHub Fork Ribbon in CSS3<\/h2>\n
For GitHub enthusiasts, this CSS snippet is a game-changer. It enables you to create attractive GitHub corner ribbons using CSS3 transforms<\/a>, perfect for open source projects or hosting demos on GitHub.<\/p>\n
\r\n.ribbon {\r\n  background-color: #a00;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  left: -3em;\r\n  top: 2.5em;\r\n  -moz-transform: rotate(-45deg);\r\n  -webkit-transform: rotate(-45deg);\r\n  -moz-box-shadow: 0 0 1em #888;\r\n  -webkit-box-shadow: 0 0 1em #888;\r\n}\r\n\r\n.ribbon a {\r\n  border: 1px solid #faa;\r\n  color: #fff;\r\n  display: block;\r\n  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n  margin: 0.05em 0 0.075em 0;\r\n  padding: 0.5em 3.5em;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  text-shadow: 0 0 0.5em #444;\r\n}\r\n<\/pre>\n
\n
Creating a Paper Page Curl Effect<\/h2>\n
This CSS technique creates a page curl effect for containers on your website, suitable for adding a visual twist to content such as images or quotes. It\u2019s an innovative way to enhance your website\u2019s design and appeal.<\/p>\n
\r\nul.box {\r\n  position: relative;\r\n  z-index: 1;\r\n  overflow: hidden;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nul.box li {\r\n  position: relative;\r\n  float: left;\r\n  width: 250px;\r\n  height: 150px;\r\n  padding: 0;\r\n  border: 1px solid #efefef;\r\n  margin: 0 30px 30px 0;\r\n  background: #fff;\r\n  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;\r\n  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;\r\n}\r\n\r\nul.box li:before,\r\nul.box li:after {\r\n  content: '';\r\n  z-index: -1;\r\n  position: absolute;\r\n  left: 10px;\r\n  bottom: 10px;\r\n  width: 70%;\r\n  max-width: 300px;\r\n  max-height: 100px;\r\n  height: 55%;\r\n  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\r\n  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\r\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\r\n  -webkit-transform: skew(-15deg) rotate(-6deg);\r\n  -moz-transform: skew(-15deg) rotate(-6deg);\r\n  -ms-transform: skew(-15deg) rotate(-6deg);\r\n  -o-transform: skew(-15deg) rotate(-6deg);\r\n  transform: skew(-15deg) rotate(-6deg);\r\n}\r\n\r\nul.box li:after {\r\n  left: auto;\r\n  right: 10px;\r\n  -webkit-transform: skew(15deg) rotate(6deg);\r\n  -moz-transform: skew(15deg) rotate(6deg);\r\n  -ms-transform: skew(15deg) rotate(6deg);\r\n  -o-transform: skew(15deg) rotate(6deg);\r\n  transform: skew(15deg) rotate(6deg);\r\n}\r\n<\/pre>\n
\n
Creating Glowing Anchor Links with CSS3<\/h2>\n
Using CSS3 text shadows, this snippet provides a unique and creative way to style links with a glowing effect on hover. While it may not suit every website\u2019s style, those who use it thoughtfully can create an impressive and engaging user experience.<\/p>\n
\r\na {\r\n  color: #00e;\r\n}\r\n\r\na:visited {\r\n  color: #551a8b;\r\n}\r\n\r\na:hover {\r\n  color: #06e;\r\n}\r\n\r\na:focus {\r\n  outline: thin dotted;\r\n}\r\n\r\na:hover, a:active {\r\n  outline: 0;\r\n}\r\n\r\na, a:visited, a:active {\r\n  text-decoration: none;\r\n  color: #fff;\r\n  -webkit-transition: all .3s ease-in-out;\r\n}\r\n\r\na:hover, .glow {\r\n  color: #ff0;\r\n  text-shadow: 0 0 10px #ff0;\r\n}\r\n<\/pre>\n
\n
Dynamic CSS3 Display Banner<\/h2>\n
Using CSS3, create dynamic, image-free banners that give the impression of hanging off the edges of content wrappers. Ideal for highlighting features on e-commerce products, image thumbnails, video previews, or blog articles, these banners add a visual pop to various elements without the need for background images.<\/p>\n
\r\n.featureBanner {\r\n  position: relative;\r\n  margin: 20px;\r\n}\r\n\r\n.featureBanner:before {\r\n  content: \"Featured\";\r\n  position: absolute;\r\n  top: 5px;\r\n  left: -8px;\r\n  padding-right: 10px;\r\n  color: #232323;\r\n  font-weight: bold;\r\n  height: 0;\r\n  border: 15px solid #ffa200;\r\n  border-right-color: transparent;\r\n  line-height: 0;\r\n  box-shadow: 0px 5px 5px -5px #000;\r\n  z-index: 1;\r\n}\r\n\r\n.featureBanner:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 35px;\r\n  left: -8px;\r\n  border: 4px solid #89540c;\r\n  border-left-color: transparent;\r\n  border-bottom-color: transparent;\r\n}\r\n<\/pre>\n
\n
Explore More<\/h2>\n
Delve into these previously published articles that might pique your interest:<\/p>\n