CSS may look exhausting, and not very many individuals can dominate it the correct way. So in this post we've written about 20+ CSS tricks and tips you should know also SASS mixins shorthand you should know. Notwithstanding, it is an expertise that can give you an incredible upper hand over different designers. On the off chance that you like addressing puzzles, you will discover bliss recorded as a hard copy CSS by viewing at it as a riddle to settle.
Let's look into some amazing CSS tricks 🤩.
Smooth Scrolling
When you visit some websites and try to got to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line CSS.
html {
scroll-behavior: smooth;
}
Prevent <textarea> resize
You can use the resize property to prevent <textarea> element form being resized (or limit it to one axis).
textarea.no-resize {
resize: none;
}
textarea.horizontal-resize {
resize: horizontal;
}
textarea.vertical-resize {
resize: vertical;
}
Drop cap
You can add a drop cap to a paragraph by using the ::first-letter pseudo element.
::first-letter {
font-size: 250%;
}
Input range pseudo-classes
The lesser-known :in-range and :out-of-range pseudo-classes can help you validate an <input> element by its min and max properties.
input:in-range{
background: rgba(255, 0, 0, 0.6);
}
input:out-of-range {
background: rgba(255, 0, 0, 0.2);
}
Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.
Useful CSS Pseudo elements selectors
Pseudo elements are a way to select and style a specific part of an element. You can think of them as a sub-element that are created as part of standard HTML elements.
How is it different pseudo class?
A pseudo class is used to select an element in a specific state(like hover or focus). A pseudo element is used to select a specific part of an element (like first-letter).
Pseudo element selectors begin with two colons(::) as a way to differentiate them from pseudo classes. This was only introduced in CSS3, therefore some selectors are backwards compatible and work with a single color(:).
::before and ::after
Creates a pseudo-element that is the child of the selected element. The ::before pseudo element is assigned as the first child and ::after is the last.
.main-text{
font-style: italic;
}
.main-text::before,
.main-text::after {
content: ' " ' ;
color: wheat;
}
/*SUPPORTED IN ALL MODERN BROWSERS*/
::first-line
Applies styles of the first line of a block-level element. Keep in mind that the length of the first line will depend on the width of the element or viewport.
p::first-line {
color: wheat;
text-decoration: underline;
}
::placeholder
Represents the placeholder text in an <input> and <textarea> element. Only a subset of CSS properties can be used with the pseudo element.
input::placeholder {
color: wheat;
font-size: 1.2em;
font-style: italic;
}
::selection
Applies styles to the part of a document that has been highlighted by the user. Can be applied globally or to specific elements only.
::selection {
color: #ffffff;
background-color: #fa5094;
}
/*Only apply to selected text withing a paragraph element*/
p::selection {
color: lightblue;
background-color: #wheat;
}
CSS Short-hands for properties
CSS Short-hands properties allow you to set the values of multiple CSS properties simultaneously. They are useful to know as they make your code more concise and easier to read.
Edge properties
Properties related to edges of the elements box model (e.g margin or padding) follow 1 to 4 syntax .
[1 values syntax]Same value on all 4 edges
padding: 1rem;[2 values syntax]First value for top and bottom and second value for left and right
padding: 1rem 2rem;[3 values syntax]First value for top. Second value for left and right. Third value for bottom
padding: 1rem 2rem 3rem;[4 values syntax]Separate value for each edge in clockwise order - top, right, bottom, left.
padding: 1rem 2rem 3rem 4rem;
Corner properties
Similarly, properties related to the corners of an elements box model (eg: borde-radius) also follow a 1-to-4 value syntax.
[1 values syntax]Same value on all 4 corner
border-radius: 1rem;[2 values syntax]First value for top and bottom and second value for left and right
border-radius: 1rem 2rem;[3 values syntax]First value for top. Second value for left and right. Third value for bottom
border-radius: 1rem 2rem 3rem;[4 values syntax]Separate value for each corner in clockwise order - top, right, bottom, left. ```css border-radius: 1rem 2rem 3rem 4rem;
Border properties
You can also condense border properties into one line. In this case though the order of the values doesn't matter.
/*LONG */
.blue-border{
border-width: 1px;
border-style: solid;
border-color: blue;
}
/*SHORTHAND */
.blue-border {
border: 1px solid blue;
}
Font properties
Same applies to the font properties. Although in this case the values can get long individual properties can be easier to read sometime.
/* LONG */
.heading {
font-style: italic;
font-weight: bold;
font-size: 3rem;
line-height: 1.4;
font-family: Arial, sans-serif;
}
/*SHORTHAND*/
.heading {
font: italix bold 3rem/1.4 Arial, sans-serif;
}
Background properties
And of course background properties can be condensed as well.
/*LONG*/
.background {
background-color: wheat;
background-image: url(../images/bg-cool.png);
background-repeat: no-repeat;
background-position: left top;
}
/*Shorthand*/
.background {
background: what url(../images/bg-cool.png) no-repeat left top;
}
SASS time-saving mixins
Using SASS makes your CSS codes very efficient. SASS is a CSS preprocessor and we have used it in almost every project. Here I am sharing some SASS mixins you can use to make your code efficient.
Center Blocks
We always find our self needing to center a block element so this mixin saves me a little typing.
@mixin center-block {
margin: {
left: auto;
right: auto;
}
}
// Use case
.wrapper {
@include center-block();
}
// Output
.wrapper {
margin-left: auto;
margin-right: auto;
}
Pseudo
When using pseudo element you always need these 3 properties so why not put them in a mixin!
@mixin pseudo (
$display: block, $pos: absolute, $content: "";
) {
conent: $content;
display: $display;
position: $pos;
}
// Use case - default
.element:before {
@include pseudo();
}
// output
.element::before {
content: "";
display: block;
position: absolute;
}
// Use case - with args
.element:befire (
@include pseudo {
inline-block, relative, "*"
);
}
// output
.element:before {
content: "*";
display: inline-block;
position: relative;
}
Ratio
A ratio mixin to create scalable elements (usually images). Since aspect ratio isn't very well-supported yet this alternative is useful.
@mixin responsive-ratio($x, $y) {
padding-top: unquote(($y / $x) * 100 + "%");
}
// use case
.wide-image {
@include responsive-ratio(16, 9);
}
// output
.wide-image {
padding-top: 56.25%;
}
Truncate
Truncating text is another useful mixin have since it can be easy to forget the syntax.
@mixin truncate ($width-limit) {
max-width: $width-limit;
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
text-overflow: ellipsis;
}
// Use case
.excerpt {
@include truncate(10rem);
}
// output
.excerpt {
max-width: 10rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Cover background
If you're working a lot with cover background images this one can save a lot of typing.
@mixin cover-background ($image-src) {
background-image: url($image-src);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
// use case
.hero {
@include cover-background("../image/main.png")
}
// output
.hero {
background-image: url("../image/main.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Organizing
Keep you SCSS files organized by keeping you mixing in a separate file. Since mixins don't generate any output until they are used it's easier to keep them in a separate file and import whenever you need to use one.
// keep all mixins together
@import "mixin.scss";
// Separate files for mixins
@import "center-block.scss";
@import "pseudo.scss";
@import "responsive-ratio.scss";
@import "truncate.scss";
@import "cover-background.scss";
Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing. Also if you find something useful share to world🥺.