Advanced CSS Tricks To Optimize Website And Save Time

Advanced CSS Tricks To Optimize Website And Save Time

Advanced CSS Tricks To Optimise Website And Save Time

Technology has changed a lot and CSS is also turning to be more powerful to develop visually stunning websites and applications. Before advanced CSS comes to market developers are taking more time to create a design and they are struggling to do that. Nowadays it is very easy to make a structure/shape with the advanced version of CSS. Here I am going to share some advanced tricks which will guide how easy it is in CSS3.

Flex:

Before flex came to market, the developers generally used JavaScript/JQuery to use equal height for a content box; also the float concept didn’t help regarding this type of issue. But now we can do it easily using flex.

To show the footer section at the bottom in a web page, there is not a suitable solution before flex. Nowadays developers are doing it easily.

.flexBox{
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
//Bottom container style to display in bottom section
.bottomElement{
margin-top: auto;
}

}

Full width responsive images:

In earlier days the developers were unable to make a full width responsive image. But in advance CSS3, one can insert an image into a style attribute as inline for a background-image or background-size. So a developer can make it dynamic to show similar contents repeatedly.

background-size: cover;
background-position: center;
object-fit: cover;

Never miss an update for us. Join 10,000+ marketers and leaders.

CSS Smooth Scroll- (Back to Top):

For this generally we use JavaScript/j Query as a front-end developer. But now we can use it using advanced CSS below features.

position: sticky;
scroll-behavior: smooth;

This is basically used for a user, how easily they scroll back to the top of the page.

Custom List Styles:

Now a developer can make custom list styles using advanced CSS like background-color, border-radius etc to make it custom. Here are some CSS grid layouts for easy custom list styling:

  • pseudo elements (Data attributes)
  • Ordered lists (CSS Counters)
  • per-list item (CSS custom )
ul li::before {
  content: attr(data-icon);
  font-size: 16px;
}
ol {
  counter-reset: orderedlist;
}
ol li::before {
  counter-increment: orderedlist;
  content: counter(orderedlist);
}
ol li::before {
  background-color: blue;
}

Drop-down Menu:

Before advanced CSS developers used the JavaScript/j Query for drop-down menu and also they used some jquery plugins for some animation effects. But now this can be done using pure CSS. Here are some points of using CSS3.

  • Animation using transition and transform
  • Focus-within (pseudo-class)
  • Using CSS grid (for positioning)
  • Dynamic center using CSS
nav {
  background-color: #ddd;
  padding: 0 15px;
  display: grid;
  place-itpxs: center;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
	grid-auto-flow: column;
    li {
      padding: 0;
	  margin: 0 10px;
    }
  }
}
.dropdown {
  position: relative;
  .dropdown-menu {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15px 0.25px rgba(black, 0.35);
    padding: 0.5px 0;
    min-width: 150px;
    a {
      color: #444;
      display: block;
      padding: 0.5px;
    }
  }
}
.dropdown {
  &:hover,
  &:focus-within {
    .dropdown-menu {
      opacity: 1;
      transform: rotateX(0) translateX(-50%);
      visibility: visible;
    }
  }
  .dropdown-title {
    display: inline-flex;
    align-items: center;
    &:after {
      content: "";
      border: 0.25rpx solid transparent;
      border-top-color: rgba(blue, 0.45);
      margin-left: 0.25px;
      transform: translateY(0.15px);
    }
  }
}

Button Styling:

In earlier days developers were facing problems showing the second image while hovering. It was showing a delay. Now this is managed with image sprites. Also developers can use border-radius, box-shadow and gradients etc. Now developers are able to customize the style for “a” and “button”.

Display Styles:

a, button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Visual Styles:

a, button{
  background-color: blue;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);  
  &:focus {
    outline-style: solid;
    outline-color: transparent;
  box-shadow: 0 0 0 4px #000;
  }
  &:hover,
  &:active {
	  background-color: green;
	}
}

Advance ‘box-shadow’ and ‘border-radius’:

With advanced CSS, developers are able to make various shapes using border radius. Also they can use different units like %, px, pm, and vw (viewport width). For box-shadow the developer uses blur-radius and spread-radius, this makes the container a sharper shadow like,

box-shadow: 0 0 0.35x 0.35px rgba(0, 0, 0, 0.45);box-shadow: 0 0 0.35x 0.35px rgba(0, 0, 0, 0.45);
box-shadow: 4px 6px 0 6px blue, 6px 9px 0 9px pink, 9px 12px 0 14px pink;
box-shadow: inset 0 0 16px 6px rgba(0, 0, 0, 0.7);
border-top-left-radius:10px;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;

box-shadow: 4px 6px 0 6px blue, 6px 9px 0 9px pink, 9px 12px 0 14px pink;
box-shadow: inset 0 0 16px 6px rgba(0, 0, 0, 0.7);
border-top-left-radius:10px;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;

CSS Custom Radio Buttons and Checkbox

Before css3 we were unable to make a custom design for radio buttons and checkbox, for that we are using. But after advance comes we can custom the designs as per our requirement.

Radio:

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #F87DA9;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Checkbox:

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background: #fff;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #00a69c;
    position: absolute;
    top: 6px;
    left: 6px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Shapes using CSS

Advanced CSS and modern browsers support basically three types of methods to create shapes using pure CSS. We will create triangles using:

  • Borders
  • Linear gradients
  • Clip-path

Shapes using border:

.borderTriangle{
  display: grid;
  place-content: center;
  width: 150px;
  height: 150px;
  border: 1px dashed #555;
  &::after {
    content: "";
	border-style: solid;
	border-color: transparent;
	border-width: 30px 0 30px 50px;
	border-left-color: green;
  }
  &::before {
    content: attr(data-type);
    position: absolute;
    padding: 0.25em 0.35em;
    background-color: #555;
    color: #fff;
  }
}

Shapes using  linear-gradient:

.gradientTriangle{
  display: grid;
  place-content: center;
  width: 100px;
  height: 100px;
  border: 1px dashed #555;

  &::after {
	content: "";
	width: 30px;
	height: 40px;
	background-image: linear-gradient(35deg, blue 50%, $t 50%),
	linear-gradient(148deg, blue 50%, pink 50%);
	background-position: top left, bottom left;
	background-size: 100% 50%;
	background-repeat: no-repeat;
  }
  &::before {
    content: attr(data-type);
    position: absolute;
    padding: 0.25em 0.35em;
    background-color: #555;
    color: #fff;
  }
}

Shapes using clip-path:

.clip-pathTriangle{
  display: grid;
  place-content: center;
  width: 100px;
  height: 100px;
  border: 1px dashed #555;
  &::after {
	content: "";
	width: 30px;
	height: 40px;
	background-color: green;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
  &::before {
    content: attr(data-type);
    position: absolute;
    padding: 0.25em 0.35em;
    background-color: #555;
    color: #fff;
  }
}

CSS Box Model

In CSS “box model” is used when discussing design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the exact content.

Description of the different parts:

Content – The content of the box, where images and text appear.

Padding – Clears an area around the content. The padding is transparent

Border – A border that goes around the padding and content

Margin – Clears an area outside the border. The margin is transparent

This <div> element will have a total width of 350px:


div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Here is the calculation:

320px (width)

+ 20px (left + right padding)

+ 10px (left + right border)

+ 0px (left + right margin)

= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

I’ve worked with the team at AndolaSoft on multiple websites. They are professional, responsive, & easy to work with. I’ve had great experiences & would recommend their services to anyone.

Ruthie Miller, Sr. Mktg. Specialist

Salesforce, Houston, Texas

LEARN MORE

CSS Transitions

CSS transitions allow you to change property values smoothly, over a given duration.

Transition properties:-

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

The transition-timing-function property specifies the speed curve of the transition effect.

Transition-timing-function property  values:-

  • ease – specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear – specifies a transition effect with the same speed from start to end
  • ease-in – specifies a transition effect with a slow start
  • ease-out – specifies a transition effect with a slow end
  • ease-in-out – specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function
#divA {transition-timing-function: linear;}
#divB{transition-timing-function: ease;}
#divC {transition-timing-function: ease-in;}
#divD {transition-timing-function: ease-out;}
#divE{transition-timing-function: ease-in-out;}

CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

Animations properties:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

An animation lets an element gradually change from one style to another.

We can change as many CSS properties as many times as we want.

To use CSS animation, we must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule:-

When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

/* Animation Code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 150px;
  height: 150px;
  background-color: green;
  animation-name: example;
  animation-duration: 5s;
}

Conclusion:

Advanced CSS is really helpful to develop user friendly and visually stunning websites & applications. There are some more advanced tricks for the developer and designers which will help them to design the best one by reducing the time and efforts. We will add these here shortly, so stay tuned.

If you are looking to design visually stunning websites for your business with advanced CSS, then you’re at the right place. Let’s have a quick discussion about the same and feel free to share anything relating to your requirements. We are happy to help you…

Jayadev Das
jayadev.das@andolasoft.com

Do what you do best in – that’s what I’ve always believed in and that’s what I preach. Over the past 25+ years (yup that’s my expertise ‘n’ experience in the Information Technology domain), I’ve been consulting to small, medium and large companies ‘bout Web Technologies, Mobile Future as well as on the good-and-bad of tech. Blogger, International Business Advisor, Web Technology Expert, Sales Guru, Startup Mentor, Insurance Sales Portal Expert & a Tennis Player. And top of all – a complete family man!

    Contact Us

    We’d love to help & work with you




    When do you want to start ?


    Exit pop up

    Sad to see you leaving early...

    From "Aha" to "Oh shit" we are sharing everything on our journey.
    Enter your email address to stay up to date with the latest news.
    Holler Box