{"id":1806,"date":"2019-12-30T06:42:51","date_gmt":"2019-12-30T06:42:51","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=1806"},"modified":"2019-12-30T09:18:03","modified_gmt":"2019-12-30T09:18:03","slug":"modern-css-tricks-and-techniques","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/","title":{"rendered":"Modern CSS Tricks and Techniques"},"content":{"rendered":"

CSS is becoming more and more powerful every passing day. It helps the web designers to design a visually stunning website. There are some advanced CSS tricks and techniques that are beneficial in front end development.<\/p>\n

CSS Tricks<\/h2>\n
    \n
  1. \n

    Vertically align the elements with Flexbox<\/h3>\n

    Centering a text or element vertically is quite difficult for the front end developers. But display: flex<\/strong> property in CSS3<\/a> specification makes it easy for the developers.
    \nHere is the code for aligning the elements vertically:<\/p>\n

    HTML:<\/strong>
    \n
    \n<div class=\"align-vertically\">
    \n Vertically aligned
    \n<\/div>
    \nCSS:
    \n.align-vertically {
    \n background: red;
    \n color: #fff;
    \n display: flex;
    \n align-items: center;
    \n height: 200px;
    \n}
    \n<\/code>
    \nOutput:<\/strong>
    \nOutput of the code is as follows:<\/p>\n

    \"figure-01\"\/\n<\/li>\n

  2. \n

    Use SVG for images and logos<\/h3>\n

    SVG is now supported by all modern browsers. For good resolution, its recommended to the front end developers to use the SVG instead of PNG and JPG. <\/p>\n

    Code below represents how to use SVG format for logos and images in CSS:
    \n
    \n#logo {
    \n display: block;
    \n text-indent: -9999px;
    \n width: 100px;
    \n height: 82px;
    \n background: url(mylogo.svg);
    \n background-size: 100px 82px;
    \n}<\/p>\n

    <\/code>\n<\/li>\n

  3. \n

    CSS Variables<\/h3>\n

    CSS variables are used to avoid the code redundancy. Once we declare the css variables, we can use them again and again. CSS variables are very useful for front end developers.<\/p>\n

    Consider the CSS below:
    \n
    \n:root1 {
    \n --main-bg-color: coral;
    \n --main-txt-color: #fff;
    \n --main-padding: 15px;
    \n}<\/p>\n

    #divexample {
    \n background-color: var(--main-bg-color);
    \n color: var(--main-txt-color);
    \n padding: var(--main-padding);
    \n}
    \n<\/code>
    \nVariables are declared by giving them name preceded by two dashes. In the above example, the main color, background color, and base padding are declared.
    \nTo use variables, use the var() function as shown in the above example.\n<\/li>\n

  4. \n

    Truncate Strings in CSS<\/h3>\n

    Nowadays web designers or front end developers face a common problem when text is too long for its div. We can truncate the text in CSS3.<\/p>\n

    See the code below that helps to tackle that problem:<\/p>\n

    HTML:
    \n
    \n<h1>
    \n hii, this is long text which needs to truncate
    \n<\/h1><\/p>\n

    CSS:<\/strong>
    \nh1 {
    \n width: 200px;
    \n white-space: nowrap;
    \n overflow: hidden;
    \n text-overflow: ellipsis;
    \n padding: 20px;
    \n font-size: 1.3rem;
    \n margin: 0;
    \n background: white;
    \n resize: horizontal;
    \n}<\/p>\n

    body {
    \n height: 100vh;
    \n overflow: hidden;
    \n display: grid;
    \n place-items: center;
    \n background: #ccc;
    \n}
    \n<\/code>
    \nCSS of h1 tag defines a fixed width and prevents the text from overflowing the container. <\/p>\n

    text-overflow: ellipsis;<\/p><\/blockquote>\n

    automatically adds ellipsis at the end of the text in order to indicate that text is truncated<\/p>\n

    See the output here :<\/p>\n

    \"figure-02\"\/<\/p>\n

    This text box shows the truncated text. You can drag the div to see the proper text like this:<\/p>\n

    \"figure-03\"\/\n<\/li>\n<\/ol>\n

    PHP programming is a valuable skill that a programmer can have. Let StudySection help you out with proving your programming skills through its PHP certification<\/a>. StudySection provides beginner as well as expert-level certifications in PHP programming to prove your level of skills in PHP programming.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    CSS is becoming more and more powerful every passing day. It helps the web designers to design a visually stunning<\/p>\n","protected":false},"author":1,"featured_media":1807,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[283,321,320,319,322],"acf":[],"yoast_head":"\nStudySection Blog - Modern CSS Tricks and Techniques<\/title>\n<meta name=\"description\" content=\"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - Modern CSS Tricks and Techniques\" \/>\n<meta property=\"og:description\" content=\"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-30T06:42:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-30T09:18:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/12\/css-tricks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Modern CSS Tricks and Techniques\",\"datePublished\":\"2019-12-30T06:42:51+00:00\",\"dateModified\":\"2019-12-30T09:18:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\"},\"wordCount\":360,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"CSS\",\"Developers\",\"Front-end\",\"Techniques\",\"tricks\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\",\"url\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\",\"name\":\"StudySection Blog - Modern CSS Tricks and Techniques\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2019-12-30T06:42:51+00:00\",\"dateModified\":\"2019-12-30T09:18:03+00:00\",\"description\":\"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modern CSS Tricks and Techniques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - Modern CSS Tricks and Techniques","description":"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.","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:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - Modern CSS Tricks and Techniques","og_description":"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.","og_url":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2019-12-30T06:42:51+00:00","article_modified_time":"2019-12-30T09:18:03+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/12\/css-tricks.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Modern CSS Tricks and Techniques","datePublished":"2019-12-30T06:42:51+00:00","dateModified":"2019-12-30T09:18:03+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/"},"wordCount":360,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["CSS","Developers","Front-end","Techniques","tricks"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/","url":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/","name":"StudySection Blog - Modern CSS Tricks and Techniques","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2019-12-30T06:42:51+00:00","dateModified":"2019-12-30T09:18:03+00:00","description":"CSS is becoming more and more powerful every passing day. Web designers can use CSS tricks to design a visually stunning website.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/modern-css-tricks-and-techniques\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Modern CSS Tricks and Techniques"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":376,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1806"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":19,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":1826,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1806\/revisions\/1826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/1807"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}