{"id":425,"date":"2022-11-07T07:13:27","date_gmt":"2022-11-07T07:13:27","guid":{"rendered":"https:\/\/3wcreators.com\/blog\/?p=425"},"modified":"2026-04-14T08:28:09","modified_gmt":"2026-04-14T08:28:09","slug":"css-3-0","status":"publish","type":"post","link":"https:\/\/3wcreators.com\/blog\/css-3-0\/","title":{"rendered":"CSS 3.0"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

WHAT IS CSS?<\/h1>\n\n\n\n

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.<\/p>\n\n\n\n

What is CSS 3?<\/h1>\n\n\n\n

CSS3<\/strong> is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of new features and additions, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

Now let\u2019s have a look at what\u2019s new!<\/h1>\n\n\n\n

#1. CSS3 Selectors<\/strong><\/p>\n\n\n\n

Selectors are at the heart of CSS. Originally, CSS allowed the matching of elements by type, class, and\/or ID. CSS2.1 added pseudo-elements, pseudo-classes, and combinators. With CSS3, we can target almost any element on the page with a wide range of selectors.<\/p>\n\n\n\n

CSS2 introduced several attribute selectors<\/em><\/strong>. These allow for matching elements based on their attributes. CSS3 expands upon those attribute selectors.Three more attribute selectors were added in CSS3; they allow for substring selection.<\/p>\n\n\n\n

1.Matches any element E whose attribute attr starts with the value val. In other words, the val matches the beginning of the attribute value.<\/p>\n\n\n\n

E[attr^=val]<\/strong>
eg.          a[href^='http:\/\/sales.']{color: teal;}<\/pre>\n\n\n\n
2.Matches any element E whose attribute attr ends in val. In other words, the val matches the end of the attribute value.<\/p>\n\n\n\n
E[attr$=val]<\/strong>
eg.          a[href$='.jsp']{color: purple;}<\/pre>\n\n\n\n
3.Matches any element E whose attribute attr matches val anywhere within the attribute. It is similar to E[attr~=val], except the val can be part of a word.<\/p>\n\n\n\n
E[attr*=val]<\/strong>  
eg.         img[src*='artwork']{
                    border-color: #C3B087 #FFF #FFF #C3B087;
                               }<\/pre>\n\n\n\n
Pseudo-classes<\/em><\/strong><\/p>\n\n\n\n
It\u2019s likely that you\u2019re already familiar with some of the user interaction pseudo-classes,namely :link, :visited, :hover, :active, and :focus.<\/p>\n\n\n\n
A few more pseudo-class selectors were added in CSS3. One is the :root <\/strong>selector, which allows designers to point to the root element of a document. In HTML, it would be <html>. Since :root is generic, it allows a designer to select the root element of an XML document without necessarily knowing it\u2019s name. To permit scrollbars when needed in a document, this rule would work.<\/p>\n\n\n\n
:root{overflow:auto;}<\/pre>\n\n\n\n
As a complement to the :first-child selector, the :last-child<\/strong> was added. With it one can select the last element named of a parent element. For a site with articles contained in <div class=\u2019article\u2019><\/div> tags, where each has a last paragraph with some information that needs to be uniformly stylized, this rule would change the font for last paragraph of each article.<\/p>\n\n\n\n
div.article > p:last-child{font-style: italic;}<\/pre>\n\n\n\n
A new user interaction pseudo-class selector was added, the :target<\/strong> selector. To draw the user\u2019s attention to a span of text when the user clicks on a same-page link, a rule like the first line below would work nicely; the link would look like the second line, the highlighted span like the third.<\/p>\n\n\n\n
span.notice:target{font-size: 2em; font-style: bold;}<a href='#section2'>Section 2<\/a><p id='section2'>...<\/p><\/pre>\n\n\n\n
A functional notation for selecting specified elements that fail a test has been created. The negation pseudo-class selector, :not <\/strong>can be coupled with almost any other selector that has been implemented. For example to put a border around images that don\u2019t have a border specified, use a rule like this.<\/p>\n\n\n\n
img:not([border]){border: 1;}<\/pre>\n\n\n\n
#2. CSS3 Colors<\/strong><\/p>\n\n\n\n
CSS3 brings with it support for some new ways of describing colours . Prior to CSS3, we almost always declared colours using the hexadecimal format (#FFF, or #FFFFFF for white). It was also possible to declare colours using the rgb() notation, providing either integers (0\u2013255) or percentages.<\/p>\n\n\n\n
The color keyword list has been extended in the CSS3 color module<\/a> to include 147 additional keyword colors (that are generally well supported), CSS3 also provides us with a number of other options: HSL<\/strong>, HSLA,<\/strong> and RGBA<\/strong>. The most notable change with these new color types is the ability to declare semitransparent colors<\/strong>.<\/p>\n\n\n\n
    \n
  1. RGBA :<\/li>\n<\/ol>\n\n\n\n
    RGBA works just like RGB, except that it adds a fourth value: alpha, the opacity level or alpha transparency level. The first three values still represent red, green, and blue. For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque. You can use any number between 0 and 1 inclusively.<\/p>\n\n\n\n
    2. HSL and HSLA<\/p>\n\n\n\n
    HSL stands for hue, saturation, and lightness. Unlike RGB, where you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation or the lightness while keeping the same base hue. The syntax for HSL comprises an integer value for hue, and percentage values for saturation and lightness.<\/p>\n\n\n\n
    The hsl( ) declaration accepts three values:<\/p>\n\n\n\n
    \u2014 <\/strong>The hue in degrees from 0 to 359. Some examples are: 0 = red, 60 = yellow, 120= green, 180 = cyan, 240 = blue, and 300 = magenta.<\/p>\n\n\n\n
    \u2014 <\/strong>The saturation as a percentage with 100% being the norm. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray \u2014 essentially causing the hue value to be ignored.<\/p>\n\n\n\n
    \u2014 <\/strong>A percentage for lightness with 50% being the norm. A lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.<\/p>\n\n\n\n
    The a in hsla( ) here also functions the same way as in rgba( )<\/p>\n\n\n\n
    3.Opacity<\/p>\n\n\n\n
    In addition to specifying transparency with HSLA and RGBA colors (and soon, eight-digit hexadecimal values), CSS3 provides us with the opacity property. opacity sets the opaqueness of the element on which it\u2019s declared, similar to alpha.<\/p>\n\n\n\n
    Let\u2019s look at an example:<\/p>\n\n\n\n
    div.halfopaque {background-color: rgb(0, 0, 0);opacity: 0.5;color: #000000;}div.halfalpha {background-color: rgba(0, 0, 0, 0.5);color: #000000;}<\/pre>\n\n\n\n
    Though the usage of both alpha and opacity notations seem similar, when you look at it, there is a key difference in their function.<\/p>\n\n\n\n
    While opacity sets the opacity value for an element and all of its children, a semitransparent RGBA or HSLA color has no impact on the element\u2019s other CSS properties or descendants.<\/p>\n\n\n\n
    #3. Rounded Corners: border-radius<\/strong><\/p>\n\n\n\n
    The border-radius property lets you create rounded corners without the need for images or additional markup. To add rounded corners to our box, we simply add<\/p>\n\n\n\n
    border-radius: 25px;<\/pre>\n\n\n\n
    The border-radius property is actually a shorthand. For our \u201ca\u201d element, the corners are all the same size and symmetrical. If we had wanted different-sized corners, we could declare up to four unique values<\/p>\n\n\n\n
    border-radius: 5px 10px 15px 20px;<\/pre>\n\n\n\n
    #4. Drop Shadows<\/strong><\/p>\n\n\n\n
    CSS3 provides the ability to add drop shadows to elements using the box-shadow property. This property lets you specify the color, height, width, blur, and offset of one or multiple inner and\/or outer drop shadows on your elements.<\/p>\n\n\n\n
    box-shadow: 2px 5px 0 0 rgba(72,72,72,1);<\/pre>\n\n\n\n
    #5. Text Shadow<\/strong><\/p>\n\n\n\n
    text-shadow adds shadows to individual characters in text nodes. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it.<\/p>\n\n\n\n
    text-shadow: topOffset leftOffset blurRadius color;<\/pre>\n\n\n\n
    #6. Linear Gradients<\/strong><\/p>\n\n\n\n
    W3C added the syntax for generating linear gradients with CSS3.<\/p>\n\n\n\n
    Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);e.g.   #grad {
      background: linear-gradient(to right, red , yellow);
    }<\/pre>\n\n\n\n
    \"\"\n
    Linear Gradient \u2014 Left to Right<\/figcaption>\n<\/figure>\n\n\n\n
    You can even specify direction in degrees e.g. 60deg instead of to right in the above example .<\/p>\n\n\n\n
    #7. Radial Gradients<\/strong><\/p>\n\n\n\n
    Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.<\/p>\n\n\n\n
    Syntax : background: radial-gradient(shape size at position, start-color, ..., last-color);e.g.     #grad {
      background: radial-gradient(red, yellow, green);
    }\/\/Default       
             #grad {
      background: radial-gradient(circle, red, yellow, green);
    }\/\/Circle<\/pre>\n\n\n\n
    \"\"\n
    output comparison<\/figcaption>\n<\/figure>\n\n\n\n
    #8.Multiple Background Images<\/strong><\/p>\n\n\n\n
    In CSS3, there\u2019s no need to include an element for every background image; it provides us with the ability to add more than one background image to any element, even to pseudo-elements.<\/p>\n\n\n\n
    background-image:
    url(firstImage.jpg),
    url(secondImage.gif),
    url(thirdImage.png);<\/pre>\n\n\n\n
    These are the implemented CSS3 features that are new, there are other unimplemented features too , we\u2019ll discuss them once they\u2019re implemented<\/p>\n\n\n\n
    Hope you liked the mini tutorial.<\/p>\n\n\n\n
    \"\"\n
    That\u2019s me if you liked it and it helped you out \ud83d\ude42<\/figcaption>\n<\/figure>\n\n\n\n
    Happy Learning \u2026!!<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
    WHAT IS CSS? Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., […]<\/p>\n","protected":false},"author":1,"featured_media":1605,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-3-0"],"yoast_head":"\nCSS 3.0 -<\/title>\n<meta name=\"description\" content=\"CSS -\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/3wcreators.com\/blog\/css-3-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS 3.0 -\" \/>\n<meta property=\"og:description\" content=\"CSS -\" \/>\n<meta property=\"og:url\" content=\"https:\/\/3wcreators.com\/blog\/css-3-0\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/3WCreatorsLLP\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-07T07:13:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-14T08:28:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1133\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"blog3wc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"blog3wc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/\"},\"author\":{\"name\":\"blog3wc\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/5d662b17b8db9074ba9b122b5c5bcfa4\"},\"headline\":\"CSS 3.0\",\"datePublished\":\"2022-11-07T07:13:27+00:00\",\"dateModified\":\"2026-04-14T08:28:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/\"},\"wordCount\":1187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/3wcreators.com\/blog\/css-3-0\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/\",\"url\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/\",\"name\":\"CSS 3.0 -\",\"isPartOf\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg\",\"datePublished\":\"2022-11-07T07:13:27+00:00\",\"dateModified\":\"2026-04-14T08:28:09+00:00\",\"description\":\"CSS -\",\"breadcrumb\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/3wcreators.com\/blog\/css-3-0\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage\",\"url\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg\",\"contentUrl\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg\",\"width\":1920,\"height\":1133},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/3wcreators.com\/blog\/css-3-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/3wcreators.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS 3.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#website\",\"url\":\"https:\/\/3wcreators.com\/blog\/\",\"name\":\"https:\/\/3wcreators.com\/\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/3wcreators.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#organization\",\"name\":\"3wcreators LLP\",\"alternateName\":\"Website Design and Development Services Worldwide\",\"url\":\"https:\/\/3wcreators.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2024\/06\/3wcreators_logo.png\",\"contentUrl\":\"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2024\/06\/3wcreators_logo.png\",\"width\":1200,\"height\":625,\"caption\":\"3wcreators LLP\"},\"image\":{\"@id\":\"https:\/\/3wcreators.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/3WCreatorsLLP\",\"https:\/\/www.linkedin.com\/company\/3wcreators-llp\/posts\/?feedView=images\",\"https:\/\/www.instagram.com\/3wcwebsitecreation\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/5d662b17b8db9074ba9b122b5c5bcfa4\",\"name\":\"blog3wc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4fc25d1bb9cb0f6a62eca9e817c73618935506174f8ddfda1ace1d971c71ba9e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4fc25d1bb9cb0f6a62eca9e817c73618935506174f8ddfda1ace1d971c71ba9e?s=96&d=mm&r=g\",\"caption\":\"blog3wc\"},\"sameAs\":[\"https:\/\/3wcreators.com\/blog\"],\"url\":\"https:\/\/3wcreators.com\/blog\/author\/blog3wc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS 3.0 -","description":"CSS -","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:\/\/3wcreators.com\/blog\/css-3-0\/","og_locale":"en_US","og_type":"article","og_title":"CSS 3.0 -","og_description":"CSS -","og_url":"https:\/\/3wcreators.com\/blog\/css-3-0\/","article_publisher":"https:\/\/www.facebook.com\/3WCreatorsLLP","article_published_time":"2022-11-07T07:13:27+00:00","article_modified_time":"2026-04-14T08:28:09+00:00","og_image":[{"width":1920,"height":1133,"url":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg","type":"image\/jpeg"}],"author":"blog3wc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"blog3wc","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#article","isPartOf":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/"},"author":{"name":"blog3wc","@id":"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/5d662b17b8db9074ba9b122b5c5bcfa4"},"headline":"CSS 3.0","datePublished":"2022-11-07T07:13:27+00:00","dateModified":"2026-04-14T08:28:09+00:00","mainEntityOfPage":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/"},"wordCount":1187,"commentCount":0,"publisher":{"@id":"https:\/\/3wcreators.com\/blog\/#organization"},"image":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage"},"thumbnailUrl":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/3wcreators.com\/blog\/css-3-0\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/","url":"https:\/\/3wcreators.com\/blog\/css-3-0\/","name":"CSS 3.0 -","isPartOf":{"@id":"https:\/\/3wcreators.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage"},"image":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage"},"thumbnailUrl":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg","datePublished":"2022-11-07T07:13:27+00:00","dateModified":"2026-04-14T08:28:09+00:00","description":"CSS -","breadcrumb":{"@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/3wcreators.com\/blog\/css-3-0\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#primaryimage","url":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg","contentUrl":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2023\/11\/CSS3.jpg","width":1920,"height":1133},{"@type":"BreadcrumbList","@id":"https:\/\/3wcreators.com\/blog\/css-3-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/3wcreators.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS 3.0"}]},{"@type":"WebSite","@id":"https:\/\/3wcreators.com\/blog\/#website","url":"https:\/\/3wcreators.com\/blog\/","name":"https:\/\/3wcreators.com\/","description":"","publisher":{"@id":"https:\/\/3wcreators.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/3wcreators.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/3wcreators.com\/blog\/#organization","name":"3wcreators LLP","alternateName":"Website Design and Development Services Worldwide","url":"https:\/\/3wcreators.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/3wcreators.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2024\/06\/3wcreators_logo.png","contentUrl":"https:\/\/3wcreators.com\/blog\/wp-content\/uploads\/2024\/06\/3wcreators_logo.png","width":1200,"height":625,"caption":"3wcreators LLP"},"image":{"@id":"https:\/\/3wcreators.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/3WCreatorsLLP","https:\/\/www.linkedin.com\/company\/3wcreators-llp\/posts\/?feedView=images","https:\/\/www.instagram.com\/3wcwebsitecreation\/"]},{"@type":"Person","@id":"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/5d662b17b8db9074ba9b122b5c5bcfa4","name":"blog3wc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/3wcreators.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4fc25d1bb9cb0f6a62eca9e817c73618935506174f8ddfda1ace1d971c71ba9e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4fc25d1bb9cb0f6a62eca9e817c73618935506174f8ddfda1ace1d971c71ba9e?s=96&d=mm&r=g","caption":"blog3wc"},"sameAs":["https:\/\/3wcreators.com\/blog"],"url":"https:\/\/3wcreators.com\/blog\/author\/blog3wc\/"}]}},"_links":{"self":[{"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/posts\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":37,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":1924,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions\/1924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/media\/1605"}],"wp:attachment":[{"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3wcreators.com\/blog\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}