CSS

Hex Opacity Table – Website Design Article

We’ve used hex colors for years but 8-digit hexadecimal is still relatively new. While rgba is simple to understand, 8-digit hex is more difficult, as you need to provide a hex representation of a numeric value. The following is a hexadecimal chart of opacity! Opacity ValueHex Code 100FF 99FC 98FA 97F7 96F5 95F2 94F0 93ED 92EB 91E8 90E6 89E3 88E0 87DE 86DB 85D9 84D6 83D4 82D1 81CF 80CC 79C9 78C7 77C4 76C2 75BF 74BD 73BA 72B8 71B5 70B3 69B0 68AD…

Read More

5 Projects to Help You Master Modern CSS — SitePoint – Website Design Article

Many claim CSS is not a programming language. I agree — it’s tougher. A mastery of CSS requires skills in design, determination, inventiveness, experience, as well as coding (especially when using preprocessors such as Sass). CSS suggests layouts and styles to the browser. A browser can interpret those suggestions whichever way it chooses and, even then, the user or device can ignore or override any properties. Creating high-performance code which works well across all devices and screen resolutions is a…

Read More

Popular design news of the week: February 24, 2020 – March 1, 2020 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

10 Ways to Hide Elements in CSS — SitePoint – Website Design Article

There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling. Animation Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible. Accessibility Each method described below will visually hide an element, but it may or may not…

Read More

Les #UI #UX incontournables de janvier 2020 – Website Design Article

Janvier commence fort avec des réalisations immersives, à la direction artistique bien léchée et aux interactions maîtrisées. Idéale pour ne pas manquer le meilleur, la sélection des incontournables vous attend de pied ferme ! Mélangeant toutes sortes de réalisations, du portfolio aux sites produits, les incontournables ont toujours la même mission : compiler les réalisations qui ont marqué durablement le mois. Sans en dire plus, je vous laisse en prendre plein les yeux ! Vous en voulez encore ? On…

Read More

Excellent News and Magazine CSS Layouts – Website Design Article

For those of us who experiment with CSS, it’s an exciting time. The advent of CSS Grid and Flexbox have opened up a whole new world of page layout possibilities. And one of the more interesting uses for these tools is their integration within news and magazine-style websites. They often have more complex and unique layout requirements than other genres. It has led to some very creative solutions. Today, we’ll show you some exciting examples of both news index page…

Read More

CSS Preprocessors Compared: Sass vs. LESS – Website Design Article

There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic, organized and productive by bringing several programming features into the it such as variables, mixins, and conditionals. The question now is which of these two do the job better? To decide, we will compare the two in several factors: the one that performs better gets one point; in the event of a tie, both will be awarded one point. Let’s begin. Read…

Read More

Delving Further Into WordPress Website Accessibility • WPShout – WordPress Website Design Article

So you’ve read Eric Karkovack’s post on WordPress accessibility, and now you want to make future sites you work on accessible. Great!The WordPress project is committed to accessibility in Core.The Accessibility Coding Standards pledge that:All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.How accessible a WordPress site is depends on three factors:ThemePluginsContentDesigners, developers and site owners all influence how accessible the end product is.Developers have a particularly important role to play…

Read More

8 Fantastic Examples of Audio Visualization CSS & JavaScript Code Snippets – Website Design Article

At the turn of the 21st century, MP3 audio was just hitting the mainstream. Certainly, the portability of these sound files was a big part of their allure. But there was also the unique side benefit of being able to visualize the sound on our computer screens. Audio players such as WinAMP came with visualization plugins, making the experience of listening to our favorite tunes even more engaging. Not only could we hear the music, but we could also see…

Read More

How to Easily Animate Website Elements on Scroll Using the Free AOS Library – Website Design Article

On-scroll animations can add quite the elegant effect to your website. A little animated polish can go a long way towards making your site look well-rounded and complete. With JavaScript and CSS, you can make elements fade, slide, or even spin as they appear when you scroll down a page. And you don’t even have to code it all yourself! Thanks to the free AOS Library, beautifying your website is as simple as adding a script. Just use a CDN…

Read More

How to Edit Source Files Directly in Chrome — SitePoint – Website Design Article

This popular article was updated in 2020. A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow: Open the locally hosted page in a browser. Swear. Open DevTools to investigate the layout and functionality problems. Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues. Copy those changes back into the editor and return to step #1. While tools such as live reloading have made this…

Read More

How to Create Printer-friendly Pages with CSS — SitePoint – Website Design Article

This article was updated in 2020 to reflect latest best practices in CSS print styling. In this article, we review the art of creating printer-friendly web pages with CSS. “Who prints web pages?” I hear you cry! Relatively few pages will ever be reproduced on paper. But consider: printing travel or concert tickets reproducing route directions or timetables saving a copy for offline reading accessing information in an area with poor connectivity using data in dangerous or dirty conditions —…

Read More

Popular design news of the week: December 23, 2019 – December 29, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

Building WordPress Websites With Zurb Foundation or Bootstrap – Website Design Article

WordPress is super versatile. You know that. I know that. But sometimes this can be an overwhelming prospect. How on earth will you get your site up and running? What platform will you use? Zurb Foundation and Bootstrap are two options but which is best? Here, we offer up some side-by-side comparisons as well as suggestions for starter themes to use for both Zurb Foundation and Bootstrap. With all the info on the table, you can plan your site’s launch…

Read More

Popular design news of the week: December 16, 2019 – December 22, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

Code Snippets Inspired by Star Wars – Website Design Article

Perhaps no movie franchise has more fans than Star Wars. For over 40 years, each new episode has generated great anticipation – not to mention monster profits. Both the movies and their long list of unforgettable characters have also served as a great inspiration to popular culture. Web design is no exception, as it seemed like the minute people started building websites, online tributes to the franchise began popping up. Naturally, CodePen is teeming with Star Wars-related creations. Everything from…

Read More

How to Fine-Tune Your Existing WordPress Website for Accessibility • WPShout – WordPress Website Design Article

Building websites that are accessible to all users has become a major focus of our industry. Not only do we need to ensure that our creations look great on different browsers and devices, but they also need to work well with assistive technologies like screen readers.This is not just a moral imperative, but an increasingly legal one as well. Even in countries (such as the United States) that don’t have concrete rules for website accessibility, companies can still be found…

Read More

Understanding and Using rem Units in CSS — SitePoint – Website Design Article

CSS units have been the subject of several articles here on SitePoint (such as A Look at Length Units in CSS, The New CSS3 Relative Font Sizing Units, and The Power of em Units in CSS). In this article, we increase the count by having an in-depth look at rem units, which have excellent browser support and a polyfill if you need support for old IE. This article was updated in December, 2019 to reflect the current state of rem…

Read More

The Transitional roles of JavaScript, HTML and CSS – Website Design Article

JavaScript’s role in creative web design had long been seen as the main driving force behind web pages’ animated and interactive elements; in comparison, HTML and CSS had generally been seen as the files that supply a page’s content and static styling, respectively. As all three languages evolved and expanded over the most recent decade, however, their ability to achieve their respective roles bled into each other. There are now many examples on the Internet of web animations constructed and…

Read More

Add Scroll Effects & Utilities to Your Website with These CSS & JS Snippets – Website Design Article

Scrolling is among the most basic tasks we ask of users. And, judging from the amount of scrolling on websites and apps these days – we’re asking a lot. Adding scroll-based effects can be a great way to enhance user experience. That is, so long as they don’t interfere with the ability to navigate through long stretches of content. If anything, effects should make things easier and add a bit of flair to the mix. Here is a collection of…

Read More

Popular design news of the week: December 2, 2019 – December 8, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

Popular design news of the week: November 25, 2019 – December 1, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

The Silly Side of Code Snippets – Website Design Article

Sometimes the daily grind of web design can make us take things a little too seriously. While that’s good for getting things done, it can also drain us of the passion we have for our work. It’s not a place where you want to be for the long term. Creating something fun is a great way to rediscover that joy. It’s often the most casual experiments that can relieve stress and bring about excitement. And it’s also an opportunity to…

Read More

Popular design news of the week: November 18, 2019 – November 24, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

A Collection of Clock and Timer Code Snippets – Website Design Article

The act of displaying time is quite popular on the web. But it’s not at all limited to what we typically wear on our wrist or hang on the wall. Sure, a traditional clock can add to the aesthetic of a website or app. However, that’s only genuinely useful in certain situations, considering our device screens already display the basics. An area where time really shines is in counting up or down. Whether you’re displaying the elapsed time of an…

Read More

Popular design news of the week: October 21, 2019 – October 27, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

CSS Trends 2019: Your Ultimate Guide to Follow the Latest CSS Trends – Website Design Article

Keeping updated with the latest trends is a must for the website success, and that’s why it is important to take a look at what makes or breaks your website development.Creating a perfect website utterly depends on designing skills because the website is all about art combining with technicalities.Therefore, things, including unique layouts, complex animations, and other micro-interactions, can revamp your website’s look and feel.An amazing way to add spice to your website layouts and animations is CSS. CSS has…

Read More

6 Cool Image Captions with CSS3 – Website Design Article

CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser…

Read More

Popular design news of the week: October 14, 2019 – October 20, 2019 – Website Design Article

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that…

Read More

Creating Wild and Crazy Backgrounds with CSS & JavaScript – Website Design Article

The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we’re also seeing some otherworldly visuals come to life through the help of CSS and JavaScript, among others. Today, we’re going to focus on an area that is sure to grab your attention: Background patterns. Note that there is no subtlety here. The code snippets we’re about to show you turn up the volume to 11.…

Read More