{"id":9497,"date":"2011-03-25T21:28:48","date_gmt":"2011-03-25T13:28:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9497"},"modified":"2022-08-23T19:41:59","modified_gmt":"2022-08-23T11:41:59","slug":"beginners-guide-to-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/","title":{"rendered":"Beginner&#8217;s Guide to CSS3 (Updated)"},"content":{"rendered":"<p>Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and monitored by designers and developers worldwide.<\/p>\n<p>This post is dedicated to those who want to learn more, and get your hands dirty on coding CSS 3. It\u2019s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets, and more. Feel free to use them in your projects; just make sure it falls gracefully on incompatible browsers.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/\" class=\"ref-block__link\" title=\"Read More: 20 Basic CSS Tips for Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">20 Basic CSS Tips for Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/20-useful-css-tips-for-beginners.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-3999 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/20-useful-css-tips-for-beginners.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">20 Basic CSS Tips for Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBoost your web designs with our guide to 20 must-know CSS tips and tricks.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Getting Started with CSS3<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2009\/06\/take-your-design-to-the-next-level-with-css3\/\">Take Your Design To The Next Level With CSS3<\/a><\/h3>\n<p>Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit\" alt=\"next level with css3\" width=\"720\" height=\"420\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/alistapart.com\/article\/progressiveenhancementwithcss\">CSS3: Progressive Enhancement<\/a><\/h3>\n<p>How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/progressive-enhancement-with-css.jpg?newedit\" alt=\"css3 progressive enhancement\" width=\"720\" height=\"480\"><\/figure>\n<h2>CSS3 Background and Borders<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/snippets\/css\/rounded-corners\/\">CSS3 Rounded Corners<\/a><\/h3>\n<p>A collection of code snippets to create rounded corner with CSS3\u2019s <code>border-radius<\/code> property.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/border-radius.jpg?newedit\" alt=\"border radius\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/understanding-border-image\/\">CSS3 Border Image<\/a><\/h3>\n<p>How to use images with <code>border-image<\/code> property to create a more compelling borders.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/understanding-border-image.jpg?newedit\" alt=\"css3 border image\" width=\"720\" height=\"420\"><\/figure>\n<h3><a href=\"https:\/\/alligator.io\/css\/gradient-borders-pure-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS3 Gradient Borders<\/a><\/h3>\n<p>Did you know that you can also create borders with color gradients?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/gradient-borders-pure-css.jpg?newedit\" alt=\"css3 gradient border\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dev.opera.com\/articles\/css3-borders-backgrounds-boxes\/\">CSS3 Borders, Backgrounds and Boxes<\/a><\/h3>\n<p>Detail explanation with examples of new CSS3 properties like: <code>background-clip<\/code>, <code>background-origin<\/code>, <code>background-attachment<\/code>, <code>box-shadow<\/code>, <code>box-decoration-break<\/code>, <code>border-radius<\/code> and <code>border-image<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-borders-backgrounds-boxes.jpg?newedit\" alt=\"css3 border background\" width=\"720\" height=\"320\"><\/figure>\n<h2>CSS3 Text<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/line25.com\/tutorials\/create-a-letterpress-effect-with-css-text-shadow\">Letterpress Effect<\/a><\/h3>\n<p>Create simple letterpress effect with CSS3.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-letterpress-effect.jpg?newedit\" alt=\"css3 letterpress\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/line25.com\/articles\/using-css-text-shadow-to-create-cool-text-effects\">Six text effects using text shadow<\/a><\/h3>\n<p>Text effects include: vintage\/retro, neon, inset, anaglyphic, fire and board game.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css-text-effect.jpg?newedit\" alt=\"css3 text effect\" width=\"500\" height=\"202\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.zachstronaut.com\/lab\/text-shadow-box\/text-shadow-box.html\">Text masking effect<\/a><\/h3>\n<p>Interactive text masking effect using the <code>text-shadow<\/code> CSS property.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/text-shadow.jpg?newedit\" alt=\"css3 test shadow\" width=\"720\" height=\"420\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/css-selection\">CSS Selection Styling<\/a><\/h3>\n<p>Change text selection colors with CSS3.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-text-selection.jpg?newedit\" alt=\"css3 text selection\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/codepen.io\/bosworthco\/pen\/YWBLpR\" rel=\"nofollow\">Perspective Text<\/a><\/h3>\n<p>You can use CSS3 Transform to create a fluid modern perspective for text.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/perspective-text.jpg?newedit\" alt=\"perspective text\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/codepen.io\/uixcrazy\/pen\/wMpbxN\" rel=\"nofollow\">CSS3 Text Gradient<\/a><\/h3>\n<p>Grandient can also be applied on text, making text more colorful and pop.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-gradient.jpg?newedit\" alt=\"css3 gradient\" width=\"720\" height=\"320\"><\/figure>\n<h3><a href=\"https:\/\/codepen.io\/fernandoporazzi\/pen\/sdgiK\" rel=\"nofollow\">Text Mask<\/a><\/h3>\n<p>CSS3 also allows you to blend and image onto text using <code>background-clip<\/code> which gives the text more depth.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-text-mask.jpg?newedit\" alt=\"css3 text mask\" width=\"720\" height=\"320\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css3_multiple_columns.asp\">Multiple-columns content<\/a><\/h3>\n<p>Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column. You can take a <a href=\"https:\/\/codepen.io\/silkine\/pen\/jldif\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">look at this example on CodePen.io<\/a> for a more compelling Newsletter-like layout with CSS3 Columns.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-columns.jpg?newedit\" alt=\"css3 columns\" width=\"720\" height=\"320\"><\/figure>\n<h2>CSS3 Drop Shadow<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/nicolasgallagher.com\/css-drop-shadows-without-images\/\">Drop Shadown in Image<\/a><\/h3>\n<p>Showcase several techniques and some of the possible appearances for dropping shadows without using images.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-dropshadow-without-image.jpg?newedit\" alt=\"css3 dropshadow\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.impressivewebs.com\/css3-glow-tabs\/\">Glow Tabs with Box Shadow<\/a><\/h3>\n<p>How to create intuitive and beautiful tabs in CSS3 with no image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-glow-tabs.jpg?newedit\" width=\"720\" height=\"480\" alt=\"Glow Tabs with Box Shadow\"><\/figure>\n<h2>CSS3 Menus<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webfx.com\/blog\/web-design\/css-only-tooltips\/\">Sexy Tooltips with Just CSS<\/a><\/h3>\n<p>How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-tooltip.jpg?newedit\" width=\"720\" height=\"480\" alt=\"Sexy Tooltips\"><\/figure>\n<h3>More tooltips:<\/h3>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/cristina-silva\/pen\/XXOpga\"><strong>Pure CSS3 tooltip<\/strong><\/a><\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.css3.info\/tooltips-with-css3\/\"><strong>Tooltips with CSS3<\/strong><\/a><\/li>\n<\/ul>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2012\/01\/22\/how-to-spice-up-your-menu-with-css3\/\">How to spice up your menu with CSS3<\/a><\/h3>\n<p>Learn how to create an elegant menu with image slide-in and slide-out as you hover over the menu.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/how-to-spice-up-your-menu-with-css3.jpg?newedit\" alt=\"spice up css3 menu\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webdesignerwall.com\/tutorials\/css3-dropdown-menu\">Dropdown menu<\/a><\/h3>\n<p>How to create a Apple.com alike multi-level dropdown menu using <code>border-radius<\/code>, <code>box-shadow<\/code>, and <code>text-shadow<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css-gradient-dropdown.jpg?newedit\" alt=\"css3 gradient dropdown\" width=\"720\" height=\"240\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/css3-tabs\/\">CSS3-Only Tabbed Area<\/a><\/h3>\n<p>Click on a tab, hide all the panels, show the one corresponding to tab just clicked on \u2013 all with CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-only-tab.jpg?newedit\" width=\"720\" height=\"480\" alt=\"CSS3-Only Tabbed Area\"><\/figure>\n<h2>CSS3 Buttons and Bubbles<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/nicolasgallagher.com\/pure-css-speech-bubbles\/demo\/\">Speech Bubbles<\/a><\/h3>\n<p>Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-bubbles.jpg?newedit\" alt=\"css3 bubbles\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ubuwaits.github.io\/css3-buttons\/\">Github alike buttons<\/a><\/h3>\n<p>Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-buttons.png\" width=\"1370\" height=\"974\" alt=\"Github alike buttons\"><\/figure>\n<h2>Generators<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.bestcssbuttongenerator.com\/\">CSS Button Generator<\/a><\/h3>\n<p>Tool to help you create a button style conveniently. Use the options to change the size, color, border, shadow, and text shadow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-button-generator.jpg?newedit\" alt=\"css3 button generator\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/neumorphism.io\/#55b9f3\" target=\"_blank\" rel=\"noopener noreferrer\">Neumorphism<\/a><\/h3>\n<p>Generate <a href=\"https:\/\/uxdesign.cc\/neumorphism-in-user-interfaces-b47cef3bf3a6?gi=3dd6c0c6f057\" rel=\"nofollow\">Neumorphism<\/a> styles which is a quite popular design direction in some mobile applications.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/neumorphism-io.jpg?newedit\" alt=\"neumorphism\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/www.colorzilla.com\/gradient-editor\/\">CSS3 Gradient Editor<\/a><\/h3>\n<p>Allows you to generate CSS3 gradient with cross-browser compatibility. You can compose a simple gradient to a more complex ones with multiple layers of gradient colors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/gradient-editor.jpg?newedit\" alt=\"gradient editor\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/animista.net\/\">Animista<\/a><\/h3>\n<p>Generate smooth CSS3 transitions with an intuitive UI and quickly with some of the presets.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/animista.jpg?newedit\" alt=\"animista\" width=\"720\" height=\"450\"><\/figure>\n<h3><a href=\"https:\/\/keyframes.app\/\">Keyframes App<\/a><\/h3>\n<p>A tool that makes creating complex animation a lot easier. Compose many CSS3 properties like colors, transforms, sizing, spacing, and click the \u201cPlay\u201d button to play it immediately.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/keyframes-app.jpg?newedit\" alt=\"keyframes app\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css3please.com\/\">Cross-browser CSS3 Rule Generator<\/a><\/h3>\n<p>CSS3 rules you can copy and paste onto your own stylesheet.<\/p>\n<h2>CSS3 Cheatsheets & References<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2009\/07\/css-3-cheat-sheet-pdf\/\">CSS3 Cheat Sheet in PDF<\/a><\/h3>\n<p>Printable cheatsheet with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-cheatsheet-pdf.jpg?newedit\" alt=\"css3 cheatsheet pdf\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/gist.github.com\/magicznyleszek\/809a69dd05e1d5f12d01\">CSS3 Selectors Cheatsheet<\/a><\/h3>\n<p>A guide and reference to CSS3 selectors and its patterns.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css3-selectors-cheatsheet.jpg?newedit\" alt=\"css3 cheatsheet\" width=\"720\" height=\"480\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css3clickchart.com\/\">CSS3 Click Chart<\/a><\/h3>\n<p>Get CSS3 styles like box sizing, border radius, text shadow, and more within a click.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/css-click-chart.jpg?newedit\" alt=\"css3 click chart\" width=\"720\" height=\"480\"><\/figure>\n<h3><a href=\"https:\/\/caniuse.com\/\">CanIUse<\/a><\/h3>\n<p>A vast database of compatibility of browser features. If you\u2019d like to see if some CSS features are compatible with your target browsers, CanIUse.com is the site to go.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/caniuse.jpg?newedit\" alt=\"caniuse\" width=\"720\" height=\"480\"><\/figure>\n<h2>More:<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/perishablepress.com\/power-of-html5-css3\/\"><strong>The Power of HTML 5 & CSS 3<\/strong><\/a> \u2013 HTML 5 and CSS 3 are quickly gaining popularity, Perishable Press is here to explain how and why.<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/javascript-spin\"><strong>Spinning Rays with CSS3 Animations & JavaScript Example<\/strong><\/a> \u2013 Simple and subtle ray spinning effect at the back of an image. <\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/line25.com\/tutorials\/how-to-create-a-pure-css-polaroid-photo-gallery\"><strong>CSS3 Polaroid Photo Gallery<\/strong><\/a> \u2013 How to build a cool looking stack of Polaroid photos with pure CSS styling.<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/code.tutsplus.com\/tutorials\/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708\"><strong>HTML 5 and CSS 3: The Techniques You\u2019ll Soon Be Using<\/strong><\/a> \u2013 A walkthrough on building a blog from ground up with HTML5 and CSS3.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and monitored by designers and developers worldwide. This post is dedicated to those who want to learn more, and get your hands dirty on coding CSS 3. It\u2019s a compilation of&hellip;<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3356,507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Beginner&#039;s Guide to CSS3 (Updated) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner&#039;s Guide to CSS3 (Updated)\" \/>\n<meta property=\"og:description\" content=\"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-03-25T13:28:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-23T11:41:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Sivakumar K\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sivakumar K\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/\"},\"author\":{\"name\":\"Sivakumar K\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f9638db199a16bcf53213bba550b828\"},\"headline\":\"Beginner&#8217;s Guide to CSS3 (Updated)\",\"datePublished\":\"2011-03-25T13:28:48+00:00\",\"dateModified\":\"2022-08-23T11:41:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/\"},\"wordCount\":849,\"commentCount\":44,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/beginners-guide-to-css3\\\/take-your-design-to-the-next-level-with-css3.jpg?newedit\",\"keywords\":[\"Cheatsheets\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/\",\"name\":\"Beginner's Guide to CSS3 (Updated) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/beginners-guide-to-css3\\\/take-your-design-to-the-next-level-with-css3.jpg?newedit\",\"datePublished\":\"2011-03-25T13:28:48+00:00\",\"dateModified\":\"2022-08-23T11:41:59+00:00\",\"description\":\"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/beginners-guide-to-css3\\\/take-your-design-to-the-next-level-with-css3.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/beginners-guide-to-css3\\\/take-your-design-to-the-next-level-with-css3.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/beginners-guide-to-css3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner&#8217;s Guide to CSS3 (Updated)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f9638db199a16bcf53213bba550b828\",\"name\":\"Sivakumar K\",\"description\":\"Siva is great fan of inspiring photography and beautiful design. He likes them more than his current job as a web developer. He has recently launched Pokkisam - a insprational photography and design blog.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/sivakumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner's Guide to CSS3 (Updated) - Hongkiat","description":"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/","og_locale":"en_US","og_type":"article","og_title":"Beginner's Guide to CSS3 (Updated)","og_description":"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and","og_url":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-03-25T13:28:48+00:00","article_modified_time":"2022-08-23T11:41:59+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit","type":"","width":"","height":""}],"author":"Sivakumar K","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Sivakumar K","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/"},"author":{"name":"Sivakumar K","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6f9638db199a16bcf53213bba550b828"},"headline":"Beginner&#8217;s Guide to CSS3 (Updated)","datePublished":"2011-03-25T13:28:48+00:00","dateModified":"2022-08-23T11:41:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/"},"wordCount":849,"commentCount":44,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit","keywords":["Cheatsheets","CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/","url":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/","name":"Beginner's Guide to CSS3 (Updated) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit","datePublished":"2011-03-25T13:28:48+00:00","dateModified":"2022-08-23T11:41:59+00:00","description":"Since its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known as CSS3, has been closely watched and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/beginners-guide-to-css3\/take-your-design-to-the-next-level-with-css3.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner&#8217;s Guide to CSS3 (Updated)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6f9638db199a16bcf53213bba550b828","name":"Sivakumar K","description":"Siva is great fan of inspiring photography and beautiful design. He likes them more than his current job as a web developer. He has recently launched Pokkisam - a insprational photography and design blog.","url":"https:\/\/www.hongkiat.com\/blog\/author\/sivakumar\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2tb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9497"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions"}],"predecessor-version":[{"id":61928,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions\/61928"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9497"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}