As time goes by, CSS is becoming more and more powerful and nowadays it offers lots of possibilities to create visually stunning websites.
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.
- Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes.
- Step 1: The HTML and Basic Squares. Let's start with the simplest version that works across all browsers. As we are using HTML5 for the effect, the basic HTML of our sticky notes is an unordered list with a link containing all the other elements in each list item.
- I am using the Venue2 Theme and need a solution on how to INCREASE the transparency of the Header Banner Wrap Image Overlay to allow my images to be more visible. I have been searching high and low here in the Weebly community hoping for a solution and tried so many of the CSS coding tricks to no avail.
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.
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:
And the related CSS:
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.
Source: WebDevBlog
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:
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.
Here’s the result of the .shape class applied to the image:
Source: Web Designer Depot
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.
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:
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:
Click here to access the demo for this technique. Please keep in mind that text gradients aren’t supported by all browsers.
Source: DevHints
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.
Check out the demo or have a look at the following code:
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.
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.
Source: BitsOfCo.de
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:
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.
Click here to see this technique in action.
Source: Chris Coyier
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:
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.
When wanting to use a previously created variable, use the var() function as shown on lines 8 to 10. Click here to view the live demo of this technique.
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:
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 <q> tag (Which defines a short quotation) and some CSS, it is easy to force the browser to display the short quotation within smart quotes:
You can see the above example in action on this demo.
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.
You can check out the demo of this technique.
Source: AllThingsSmitty
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.
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.
Source: Max Chehab
CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand. It’s super important to understand because your website’s reputation partially relies on it, as it is the backbone of your web design.
This article features 20 excellent websites to help you “grok” CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.
1. A List Apart CSS Topics
A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of CSS dating back to 1999. Most articles are geared towards intermediate to advanced developers who put a strong emphasize on standards-compliant designs.
2. CSS Help Pile
CSS Help Pile is an aggregate of CSS resources, tips, and how-to’s. The site is well-organized and a wonderful resource for any level of expertise. There’s a category for beginners, browser bugs, and short reviews of CSS books.
3. CSS Basics
CSS Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental CSS concepts. The writing is clear and succinct – making it a great resource for those just starting out. All 18 chapters can be printed or downloaded in PDF format.
4. Holy CSS Zeldman!
Holy CSS Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based CSS tutorials, tools, and layouts.
5. Eric Meyer: CSS
Here’s a collection of works by Eric Meyer (acclaimed web professional and author). Some resources you’ll find on this page are css/edge (Eric Meyers experiments on CSS) and CSS reference.
6. 456 Berea Street – CSS category
Roger Johansson’s 456 Berea Street has over 300 posts under the CSS category. Some posts talk choosing an image replacement method while others teach you CSS techniques.
7. /* Position Is Everything */
Those just getting their hands around authoring CSS code will quickly realize that a significant chunk of time (and frustration) stems from getting rid of browser bugs. Position Is Everything discusses known browser bugs and shares CSS methods that work across browsers. Here, you can read about the one true layout or learn what happens when you nest absolutely-positioned div’s.
8. HTML Dog CSS Tutorials
5 Css Tricks That Will Instantly Beautify Your Weebly Sites
HTML Dog is a tutorial website dedicated to teaching XHTML and CSS best practices. There’s three CSS tutorial sections: Beginner, Intermediate, and Advanced.
5 Css Tricks That Will Instantly Beautify Your Weebly Site Website
9. Learn CSS Positioning in Ten Steps
Positioning elements using CSS can be a tricky concept at first. If you’re having a hard time understanding the fundamentals of CSS positioning, check out this 10-step tutorial to get you positioning stuff in no time!
10. Andy Budd CSS/Web Standards Links
Andy Budd (directory of Clearleft, CSS guru, and author of one of my favorite books – CSS Mastery) has a set of CSS/web standards links to help you find reliable, useful information about CSS.
11. W3CSchools CSS Tutorial
W3CSchools has a CSS section that covers the very basics of CSS up to more advanced topics.
12. css Zen Garden
css Zen Garden is a showcase of the things you can do CSS. Most importantly, it highlights the concept of separating content from presentation. Using the same HTML file, designers submit external stylesheets to style the HTML file. I suggest using the Web Developer Tool to inspect how the layouts work and what styles affect certain elements of the page.
13. CSS at MaxDesign
At MaxDesign, you can find Russ Weakley’s brilliant set of CSS-related tutorials. Some things to expect here are: Listmatic – which shows you a variety of ways you can use CSS to style lists, and Floatutorial – which goes through the fundamentals of floating elements.
14. CSSeasy.com
CSSEasy.com’s slogan is “learn CSS the modern way”. The site promotes learning by experience, with the idea that if you inspect the source code and see how things fit together as a whole, you’ll gain a better understanding of CSS. The Web Developer Tool will also come in handy on this website.
15. CSS-Discuss
CSS-Discuss is a community of CSS enthusiasts. The CSS-Discuss Wiki is a comprehensive collection of real-world usage of CSS.
16. Web Design from Scratch: CSS
Ben Hunt’s Web Design from Scratch has an excellent section on CSS that covers basic concepts about CSS. I highly recommend beginners start off with Introduction to CSS, a quick but very informative starting point to getting your hands dirty with CSS.
17.CSS-Tricks
5 Css Tricks That Will Instantly Beautify Your Weebly Site Work
CSS-Tricks is a blog dedicated to the topic of CSS. You’ll find helpful posts such as what CSS Sprites are (in a nut shell), techniques for image replacements, and even screencasts on topics like conditional stylesheets.
18.CSS on Delicious
The CSS tag on Delicious is a great way to find popular links that relate to CSS. It allows you to see what people are currently reading.
19. SitePoint CSS Reference
SitePoint has a CSS reference section that discusses introductory level CSS topics. You can get a crash course on general CSS syntax and nomenclature onto slightly more advanced topics such as CSS hacks and filters.
20. CSSDog
5 Css Tricks That Will Instantly Beautify Your Weebly Site Free
CSSDog has a section for both beginners and more advanced developers. Aside from CSS lessons, their CSS Reference section – which lists quick guides and color references – are very helpful.
Missed your favorite?
Do you have a favorite CSS website not on the list? Talk about it in the comments.