Auto Added by WPeMatico

macOS System Font Stylistic Sets for CSS

San Francisco, macOS’ System Font, comes with several “stylistic sets” to be used in different contexts. They can be activated from CSS using these properties:font-feature-settings: "ss01" on makes the sides of 6 and 9 straight.font-feature-settings: "ss02" on for “open 4.”font-feature-settings: "ss03" on makes colon vertically-aligned, even in awkward positions.font-feature-settings: "ss06" on adds a slash to 0 (to distinguish itself from O), and some serif to I and l, making it easier to tell them apart.…

Continue Reading

Cool uses of the ::before and ::after pseudoelements

Cool uses of the ::before and ::after pseudoelementsI have a confession to make: I kind of love the ::before and ::after pseudoelements.They’re like a couple of henchmen along on any styling adventure.Like never having to face the world alone — for everywhere there was 1, there is now 3.3 times the power. 3 times the number of styleable pieces. 3 times the amazing visual effects you can create.What are pseudoelements?Now if you’ve never encountered ::before and ::after before, you may be asking “what is…

Continue Reading

CSS’ sibling combinators in 2 minutes

Photo by Uriel Soberanes on UnsplashOften overlooked, sometimes forgotten 😭Most of those familiar with CSS will have a good idea of what the following CSS does;Nothing scary here 👻The overlooked selectorsHow about these rules?These are sibling selectors using the selector combinators tilde(~) and plus(+).~The tilde(~) character selects all siblings that succeed a given element.Consider a calendar;Image we wanted to reduce the opacity of all days succeeding today;This would result in;You might not use it often but it can be very useful…

Continue Reading

Cross Browser Feature Detection With Modernizr

Modernizr is an open-source and compact JavaScript library that allows developers to craft various levels of experiences for users depending with respect to cross browser compatibility. Modernizr helps developers to perform cross browser testing to check whether new generation HTML5 and CSS3 features are natively supported by their visitor’s browsers or not and to provide dedicated fallbacks for older browsers that are notorious for their poor feature support. Modernizr coupled with the principle of…

Continue Reading

Understanding CSS BEM Naming Convention

Understanding CSS BEMPhoto by Fotis Fotopoulos on UnsplashNaming things are always difficult in the programming world, and in CSS.Some developers don’t pay that much attention to naming. They claim that there isn’t enough time on thinking about which name to give each class. That may be right, but in the long-run low-quality code consumes much more time.So there are different approaches to solve the naming problem, and one of them is called Block-Element-Modifier (BEM). In this article, we…

Continue Reading

Top 5 Frontend Development Topics To Learn in 2019

Ah, January.A time of optimism, a time for starting afresh.For making new goals and resolutions.And in the web development world, for looking at the landscape and deciding what we need to learn just to keep up.Because let’s face it — web development is always changing, and if we aren’t constantly learning we’re falling behind.Deciding What To LearnBecause things are changing so fast, deciding what to focus on is key to not getting overwhelmed.I’ve covered before how I decided what to…

Continue Reading

Animated Input Label with Chrome Autofill Detection in React

Chances are you’ve had Chrome autofill a form for you. The data fills in with a yellow background and content you didn’t have to type. This provides a great experience for you as a user but they give very little ability to developers to know that things have been filled in.This can lead to broken user interfaces like this. Lets see how we can avoid this with our own UIs.Input with LabelThis is mostly applicable to interfaces…

Continue Reading

Top 21 JavaScript And CSS Libraries

Everyone, no matter whether they are a fresher or experienced in the domain of UI development and UX design, have at some point became familiar with JavaScript & CSS libraries, around their time in work. These frameworks became popular because they:Reduce the time complexity by reducing lengthy scripts into libraries where they can be reused by just calling a function or adding a class.Enabled developers to add an enhanced functionality that guaranteed a better user experience.Minified…

Continue Reading

Create a Hoverable Display Card with React and Emotion

CSS-in-JS is a powerful construct for styling with React based applications. In some small cases it can be unnecessary, however as applications grow CSS can become difficult to maintain. Even more so within applications that do theming and or need run-time evaluation CSS, normal CSS can be difficult to use for these cases.There are a lot of rules around CSS when it comes to specificity, and even the order at which a .css file was included…

Continue Reading

How To Write CSS When You Hate CSS

Go From Cee-Ess-Ess To Cee-Ess-YES!I hate CSS.Well, I hated CSS. While learning to write code, CSS seemed like an inoperable black box. The twin tasks of deciding how something should look, and then making it look that way seemed just impossible. Which resulted, very naturally, in a deep-seated hatred of the entire art.It turns out, though, that a lot of that distaste sprung from not having a process in place to structure and write good CSS…

Continue Reading

CSS Grid Crash Course

TL;DRCSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward, as apposed to the hacks the we used to do to achieve even the simplest layouts.Main Target 🎯Is to leave today with a good idea of the surface area of CSS Grid, when to reach out for it, and what are the different pieces that…

Continue Reading

HOW TO: Pure CSS pie charts w/ CSS variables

Photo by Charles Deluvio 🇵🇭🇨🇦 on UnsplashCreate customisable pie charts in ~30 lines of CSS 😎Ever needed to create a pie chart for your app but didn’t want to pull in an entire library? I’ve got you covered. In around 30 lines of vanilla CSS we can create our very own pie charts 🙌We are only creating the pie. We won’t be creating the legend to go with it or any interactive features. These wouldn’t be tricky…

Continue Reading

Silky Smooth Menu Animation in React

One of the principals of material design is Expressing Continuity, which teaches us that the motion is not just a fancy feature we add to our app or whimsical touch to the look and feel of the app. It’s rather a primary mean to guide user regarding how to do specific actions, what would happen if t continued that action, where items are going, from where they were originated, and ultimately convey crucial messages…

Continue Reading

CSS Keyframe Animation with Pause between Keyframes

Earth travels around the Sun with pause between keyframesHave you ever wonder about how we can pause the animation when it starts?We can use animation-delay property but it will only delay the start of the animation, once the animation starts it will continuously animate. Once the CSS keyframe animation starts, we cannot pause it unless we will use javascript. So how can we make the animation to pause between keyframes?The solution will be making…

Continue Reading

How to Make Your Web Page Dance with jQuery — Part One

How to Make Your Web Page Dance with jQuery: Web Animations with jQuery (Part 1)Table of ContentsIntroductionWhat is jQuery?The jQuery SyntaxRequired: Basic understanding of HTML and CSSIntroductionIf you are reading this tutorial, congratulations you have read a few books on HTML and CSS, and you probably know how to create a basic website (or not.)HTML and CSS is a great place to start when learning how to code. But what’s next? I get asked this question from beginners all the…

Continue Reading

How to Make Your Web Page Dance with jQuery — Part Two

How to Make Your Web Page Dance with jQuery: Web Animations with jQuery (Part 2)Table of ContentsIntroductionHow to link jQuery file to HTML PageHow to Use jQuery EffectsPart One: https://medium.com/@ndubuisi/how-to-make-your-web-page-dance-with-jquery-part-one-dcfc8a51e003Welcome to the next half of the series.If you have made it this far, you are one soldier!https://medium.com/media/62415fdaa97b8fbd4b5d811b00af50cb/hrefIn this section, we will be applying what we have learned so far about jQuery. We are going to be animating a (very ugly) website template I made.Website TemplateDirectory Structure for TemplateI made this template using…

Continue Reading

Getting Started with Bootstrap

This crash course is designed to provide you with the basic knowledge of Bootstrap, how it works and walk you through to start building projects with Bootstrap.Introduction:Bootstrap is a CSS framework built to help web developers build responsive web pages faster and easier.Bootstrap contains a Library of predefined CSS classes and some JavaScript. Using Bootstrap entails giving these class names to our HTML elements and the styles apply.So you see, the guys who built Bootstrap have…

Continue Reading

Difference between an absolute, relative and fixed positioning

I have seen many of the front-end developers always getting confused with these concepts and they end up trying every possibility that matches their scenario. Thus, I thought of describing all of these concepts one by one with proper figures.First things first, I would like to start by describing some of the CSS properties before I jump into position property.Unlocked properties :-The Position property unlocks four CSS properties to access. They are as follows: -toprightbottomleftLets discuss first…

Continue Reading

Using CSS Grid where appropriate (revisited)

This solution is a follow-up post on my last year’s article “Using CSS Grid where appropriate”. The goal is to find a solution for navigation with an unknown number of items.RECAPCreating navigation with CSS Grid is arguably not the best solution. However, if one wants to use CSS Grid, two options were suggested:Using grid-auto-flow: row; and placing each item in the grid, like this:.nav__item:nth-child(1) { grid-area: 1 / 1 / 2 / 2;}Defining a definite grid…

Continue Reading
Close Menu
Skip to toolbar