Category: CSS

Articles on CSS tips and tricks

Simple CSS blinking cursor

Here is an example of simple CSS only blinking cursor that you can use and modify according to your needs. I have used keyframes to introduce infinite blinking animation to the cursor. See the Pen Simple CSS Blinking Cursor by Puneet Sharma (@webdevpuneet) on...

CSS pseudo selectors for HTML5 Date-Time Picker

CSS

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox: ::-webkit-datetime-edit { padding: 1em; } ::-webkit-datetime-edit-fields-wrapper { background: silver; } ::-webkit-datetime-edit-text { color: red; padding: 0...

Text aligning center vertically and horizontally in an anchor tag – CSS

CSS

Add the following styles to the anchor tag to center/middle align it both horizontally and vetically. a.center-align{ display: flex; flex-direction: column; justify-content: center; text-align: center; }

CSS shapes for reverse curved corners

CSS

Reverse cornered css shape in white color Here is a simple example of how we can create reverse cornered shapes in the white color shown in the image above. Please have a look at the demo below and also check its HTML and CSS. You can also edit it in Codepen and...

How to create a SCSS to CSS compiling setup?

CSS

Hi, I have created a very nice and minimal working scss/sass to css compiling setup on my local and i am sharing the steps to do it with you. Step 1 – install node js from here – https://nodejs.org/en/ Step 2 – initialize package.json file with...

Why should I use Sass or SCSS? Revision:

CSS

CSS is awesome on its own but gets larger, more complex, and harder to maintain with time in large and complex projects. Sass or SCSS features like nesting, mixins, and inheritance helps in maintainable CSS for large projects. Here is a quick glimpse of what Sass or...