CSS

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one of them is to add more graphic window size units, for better compatibility between browsers and mobile devices.   New units Before we…

Category : Css   22-06-2023   by Laura Celis Ballesta

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or high contrast colors, but the vast majority of people still use pure colors to implement this type of style to…

Category : Css   12-05-2023   by Laura Celis Ballesta

The meaning of negative spaces in web design

As designers we must help others understand why it is important to maintain white space within our website and why it is important to the user experience. As early as the Victorian era, Mario Praz, an Italian critic and researcher associated this fear with the term "Horror Vacui" which was used…

Category : Css   12-05-2023   by Laura Celis Ballesta

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it is very likely that it will be supported and can be used directly. The idea behind the CSS Nesting concept is…

Category : Css   11-08-2021   by Silvia Mazzetta

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used on a website for example when there is a request running and the result is not yet retrieved. What are they? Loading…

Category : Css   05-04-2021   by

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites. If you want to know what are the significant changes that come with the next version 5 which is in…

Category : Css   05-04-2021   by

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how to store a user’s settings on your website, specifically, how to save dark mode settings and restore it when a…

Category : Css   22-12-2020   by

15 stunning examples of CSS 3D transforms

Web designing requires a highly professional outlook and the know how of the correct procedures that go about making a design attractive. A factor that every designer should be familiar is the fact that HTML5 and CSS3 are parallel to each other and blend together.  3D graphics, 3D Games and 3D…

Category : Css   25-11-2020   by Janeth Kent

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked on the left side taking up the minimum space according to their content. If we want to modify the behavior of…

Category : Css   17-11-2020   by Janeth Kent

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between them. This is very useful when during night you want the user to be able to NOT suffer by staring…

Category : Css   10-11-2020   by

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain image effects, typical of photo retouching applications, such as sepia, variations in brightness or contrast (or others) on the fly…

Category : Css   28-10-2020   by Silvia Mazzetta

CSS Flexbox : some tools

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it…

Category : Css   29-09-2020   by Janeth Kent

How To Create a Logo SVG Animation Using Only CSS

Web animations are a joy. They enhance the user experience by providing visual feedback, guiding tasks, and vitalize a website. Web animations can be created in several ways, including JavaScript libraries, GIFs, and embedded videos. But for a few reasons, the simple combination of SVG and CSS is attractive. Comprised of code…

Category : Css   29-09-2020   by Silvia Mazzetta

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving what I thought would be beautiful yet simple style to my HTML code. But suddenly I ended up with class…

Category : Css   23-05-2020   by Iveta Karailievova

Must Have CSS Tools for Designers

There are a lot of tools and tutorials which can help designers and developers in learning CSS easily and rapidly. In this article we have listed 15 css tools which can help designers to achieve creative and innovative results. The following css tools can help designers to create css menus, animations, 3d shapes, layers,…

Category : Css   30-03-2020   by Janeth Kent

The Absolute Beginner's Guide to Sass

The Absolute Beginner's Guide to Sass

You've probably heard about CSS preprocessors before, whether it's Sass, LESS or Stylus, and they're all great tools to maintain your CSS, especially when you work with large codebases. For "lay" (;-)) people: A CSS preprocessor is a program that allows you to generate CSS from the unique syntax of the…

Category : Css   05-02-2019   by Janeth Kent

Parallax Landscape Scenes Built Entirely With CSS and HTML

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile apps. You can do some pretty crazy stuff with parallax. It’s possible for developers to code graphics onto a page without…

Category : Css   27-11-2018   by Janeth Kent

CSS Shapes: how to create non-rectangular shapes (part 1)

CSS Shapes: how to create non-rectangular shapes (part 1)

CSS Shapes (Level 1) has been accessible in Chrome and Safari for various years, be that as it may, this week it sends in a creation form of Firefox with the arrival of Firefox 62 — alongside an exceptionally pleasant expansion to the Firefox DevTools to enable us to work…

Category : Css   17-09-2018   by Janeth Kent

CSS Shapes: how to create non-rectangular shapes (part 2)

CSS Shapes: how to create non-rectangular shapes (part 2)

The shape-image-threshold (Position Text Over A Semi-Opaque Image) So far we've looked at employing a fully transparent part of a picture or of a gradient so as to form our shape, however, the third property defined within the CSS Shapes specification implies that we will use images or gradients with semi-opaque…

Category : Css   17-09-2018   by Janeth Kent

Useful Tutorials on SVG & CSS3 Animation

Useful Tutorials on SVG & CSS3 Animation

There isn't just one way to do SVG and CSS3 animations. Animation is one such area which has been quite complicated until recently. Today we're going to look some tutorials that should get you on the right track towards mastering SVG animation with CSS. A Look Into: SVG Animation SVG Files in…

Category : Css   26-06-2018   by Janeth Kent

The CSS Grid Explained in 7 Minutes (with diagrams and code)

The CSS Grid Explained in 7 Minutes (with diagrams and code)

A quick and easy high level introduction to the main concepts of CSS Grid given by Morten Rand-Hendriksen at Wordcamp Europe 2017. 7 minutes and you'll understand what CSS Grid is and how to create a basic layout of your own. Adapted from the full CC BY licensed original at…

Category : Css   10-01-2018   by Janeth Kent

CSS Progressive Loading in Chrome

CSS Progressive Loading in Chrome

Until now, only in IE/Edge could we leverage streaming of CSS to load progressively the CSS of the components as their HTML is streamed. In other browsers, they would normally block rendering till the entire CSS sources were loaded, giving us the white screen of wait before anything could render. With…

Category : Css   09-05-2017   by Janeth Kent

Guide to viewport units vw, vh, vmin and vmax

Guide to viewport units vw, vh, vmin and vmax

The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages. .sidebar {…

Category : Css   23-02-2017   by Janeth Kent

CSS Media Queries for iPad and iPhones

CSS Media Queries for iPad and iPhones

Many times We have had to design responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site's content. Because of this, We have ended up with a somewhat large list of CSS media queries for typical devices over the past year or two. here you…

Category : Css   09-02-2017   by Janeth Kent

CSS-Only Olympic Rings

CSS-Only Olympic Rings

Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, we decided to try our hand at creating the Olympic Rings with just CSS and HTML. We realize its simple, but it was fun to figure out the layering and how to do it with just a few elements.  Just having…

Category : Css   08-08-2016   by Janeth Kent

The Best CSS Frameworks for Material Design

The Best CSS Frameworks for Material Design

Material design is the googles new design practice, it is mobile first approach design system created by Google. The idea of material design is to make everything in a same simple way so anybody can understand them even if it is an app with brand new functionality. Material designis derived from…

Category : Css   16-11-2015   by Janeth Kent

CSS Animations: the Pocket Guide

CSS Animations: the Pocket Guide

With CSS3 we acquire the ability the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true. Animations within CSS3 allow…

Category : Css   20-10-2015   by Janeth Kent

CSS: Image Hover Effects You Can Copy and Paste

CSS: Image Hover Effects You Can Copy and Paste

In the past, we’ve wrote about some awesome examples of CSS effects that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet. 1. Sneak Peek Before we…

Category : Css   09-04-2014   by Janeth Kent

Speed Up Your Coding with 15 jQuery CSS Plugins

Speed Up Your Coding with 15 jQuery CSS Plugins

Today we have 15 great jQuery CSS plugins pertained to design a beautiful site using cool effects with CSS/jQuery. 1. Stickup Stickup is a simple jQuery plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites,…

Category : Css   12-12-2013   by Janeth Kent

10 Best CSS Gradient Generators

10 Best CSS Gradient Generators

CSS3 changes everything. There are 116 new properties* with multiple vendor prefixes and different syntaxes. No one could be expect you to memorize everything. Fortunately, there are a number on free online tools which will help you create modern CSS3 code to cut and paste into your stylesheets Creating CSS gradients…

Category : Css   29-11-2013   by Janeth Kent

Clicky