clip-path
The clip-path in CSS displays only the clipped region. It clips the layouts to basics shapeslike star, traingle, arrow, frame, circle and many more. Area that are outside the clipped region are hidden.The clip in css is depreciated.one of the most common use is on image. If i want to show and hide certain part of image, this clip-pathis best method to use. Check here for more details about "clip-path".
formal definition
Default Value
NoneApplies to
All elements; In SVG, it applies to container elements excluding the defselements and all graphics element and all graphics elements.
Inherited
No
Animation type
Yes, as specified for basics-shapes otherwise no
html code
<!-- clip-path example-->
<div class="tricks1">
<div class="shapes rabbet"></div>
<div class="shapes leftArrow"></div>
</div>
CSS code
html, body {
width:100%;
height:100%;
}
* {
box-sizing:border-box;
}
.tricks1 {
padding:5vh;
background:linear-gradient(to right,
#780206, #061161);
width:100%;
height:auto;
}
.shapes {
height:100px;
width:100px;
margin-top:2rem;
margin:auto;
}
.rabbet {
margin-top:2rem;
/*"https://www.cssportal
.com/css-clip-path-generator/"*/
-webkit-clip-path: polygon(0% 15%, 15% 15%,
15% 0%, 85% 0%, 85% 15%,
100% 15%, 100% 85%, 85% 85%,
85% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0% 15%, 15% 15%,
15% 0%, 85% 0%, 85% 15%, 100% 15%,
100% 85%, 85% 85%, 85% 100%, 15%
100%, 15% 85%, 0% 85%);
background-color:#a7414a;
}
.leftArrow {
margin-top:2rem;
-webkit-clip-path: polygon(75% 0%, 100% 50%,
75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%,
75% 100%, 0% 100%, 25% 50%, 0% 0%);
background-color:#282726;
}
css Gradients
The CSS Gradients is all about mixing different colors and create imaginative colors in websites.Here in this example i have apply CSS Gradients in text. Just as you declare the Background of an element to be a solid color in CSS, you can also declare that Background to be as Gradients We can generate new color mixture with the help of css gradients also.We mainly have two types of gradients.Linear-Gradients and Radial Gradients. Both Radials and Linear gradients can be repeating color mixture. To create linear gradients you must include atleast mention two color stops. Check here for more details about CSS-Gradients.
formal definition
Syntext
Background-image/Background:linear-gradient(direction, color1, color2, ....).
Background-image/Background:repeating-linear-gradient(direction, color1, color2, ....).
Background-image/Background:radial-gradient(direction, color1, color2, ....).
Background-image/Background:repeating-radial-gradient(direction, color1, color2, ....).
Applies to
All elements;
Inherited
Yes
Animation type
yes. But direct animation is not possible.
html code
<div class="gradientText">
Boom!!! Gradient text.
</div>
CSS code
.gradientText {
/*first should be always "background",
then other syntext follows,*/
font-size:4rem;
padding:1rem;
background:#264653;
font-family: 'Dosis', sans-serif;
border-left:10px inset #ef6f51;
background:linear-gradient(45deg, #e9c46a,
#e76f51);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
text-align:center;
}
Google fonts
Google Fonts
is created and maintained byGoogle.This is another way to improve
design in any articles.It improves the design of the text. There are over 1017 as of 2020 different font families but not all of them are variavle. But i suggest you to use only
Variable fonts.There are lot of handsome and adorableGoogle Fonts that we can use.some popular google fonts are: Oswald,Roboto Mono,Raleway,Roboto Slab,Playfair Display Lora,Wors Sans,Rubik,Quicksand,Heebo.
formal definition
Mention link
Applies to
All elements;
Inherited
yes
Categories
variables,Different languages, Font properties(thickness, slant, width, Number of styles).
html code
<div class="googleFontsHead">
<h1>I love Google Fonts</h1>
<hr class="horizontal__line">
<div id="visitEnd">
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
mountains bring hope for adventures.
</div>
</div>
CSS code
* {
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
}
h1 {
font-family: 'Roboto Mono', monospace;
color: #264653;
text-align: center;
padding:1rem;
margin-bottom: .5rem;
padding-bottom:0;
font-size:2rem;
font-weight:900;
}
#visitEnd {
padding:2rem;
font-family: 'Changa', sans-serif;
background-color:#264653;
color: #e9c46a;
text-align:justify;
text-justify: inter-word;
border-left:5px inset #e76751;
max-width:1200px;
margin:auto;
}
.horizontal__line {
padding-top:0;
margin-top:0;
height:5px;
background-color:#264653;
width: 20%;
text-align: center;
margin-bottom:2rem;
}
Background Blend Mode
The Background Blend Mode in CSS can be defined as interaction of an elements background-color with elements`s background-image to get background color effects. It adds the background color effects to image. Check here for more details about "google-fonts".
formal definition
Default Value
NormalApplies to
All elements; In SVG, it applies to container elements excluding the defselements and all graphics element and all graphics elements.
Inherited
No
Javascript syntext
object.style.backgroundBlendMode = "screen"
CSS syntext
background-blend-mode:normal|multiply| screen|overlay|darken| lighten|color-dodge|saturation|color|luminosiy;
html code
<p class="blendmodeTricks8">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
CSS code
html, body {
width:100%;
height:100%;
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
.blendmodeTricks8 {
height:100%;
width:100%;
background-image: url("img/bubbleBackground.jpg");
background-color:#123456;
background-blend-mode:luminosity;
background-size: cover;
color:white;
}
single Page Navigation
we can travel travel from one webpage to another webpage with the help of html links. But is it possible to jump to particular section within webpages. When we have long single web page, scrolling takes a lot of time. But we have a method in html to just to a specifice part of web page by using id selector and link. add the following syntext for smooth and slow page navigation.
formal definition
Default Value
NoneApplies to
All elements; In SVG, it applies to container elements excluding the defselements and all graphics element and all graphics elements.
Inherited
No
CSS syntext
html code
<a class="links" href="#bottom">↓ To Bottom</a>
<div id="visitEnd" id="top" style="text-align: center;">
<pre>
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
.
.
.
Lorem ipsum dolor sit amet.
</pre>
</div>
<a class="links" id="bottom" href="#top">↑ To Topl</a>
CSS code
* {
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
}
h1 {
font-family: 'Roboto Mono', monospace;
color: #264653;
text-align: center;
padding:1rem;
margin-bottom: .5rem;
padding-bottom:0;
font-size:2rem;
font-weight:900;
}
#visitEnd {
padding:2rem;
font-family: 'Changa', sans-serif;
background-color:#264653;
color: #e9c46a;
text-align:justify;
text-justify: inter-word;
border-left:5px inset #e76751;
max-width:1200px;
margin:auto;
}
.horizontal__line {
padding-top:0;
margin-top:0;
height:5px;
background-color:#264653;
width: 20%;
text-align: center;
margin-bottom:2rem;
}
css animations
The CSS animations
is one main factor that make our website look amazing and make client jawless. We can animate
in css without using,Javascript,Zurb,jQuery and Flash.
But why should we use css animation for simple taks? because it`s easy to write syntext and solve the problems.
CSS animation allow to change the Style from one state to another slowly bring nice effects.
The code that are specified inside@keyframes will gradually change from current style to new style with mentioned time. To work animation, bind an element with animation.
The animation-duration property defines total time required to complete animation.
no animation will take place if we don`t mention animation-duration, as default value is
0s.
Check here for more details about "CSS-Animation".
formal definition
Default
NoneInherited
No
Must syntext
Animation name and animation-duration.
html code
<div class="tricks9">
<div class="animationcssTricks">
<div class="UpdownUp"><div>
<div>
<div>
CSS code
.tricks9 {
background:linear-gradient(45deg, #5f2c82, #49a09d);
width:100%;
height:100%;
display:flex;
justify-content: center;
align-items: center;
border-left:10px solid black;
}
.animationcssTricks {
position: relative;
border-radius:50%;
display:flex;
justify-content: center;
align-items: center;
height:200px;
width:200px;
background:linear-gradient(to right, #e9c46a,
#e9c46a, #f4a261, #e76f51);
animation:rotates 1s infinite;
}
.UpdownUp {
border-radius:50%;
background:rgba(255,255,255,.9);
width:170px;
height:170px;
}
@keyframes rotates {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
First letter of the word
It`s Breathtaking to see that there is rapid development in technology, so in the web development. Each year a lot of new features or updates are introduced in every field. Now in css also, a lot of new features are being introduced. Sometimes when we want to give CSS properties only to first letter of the word. we have simple method in css by using pseudo. for examle, we can give extra large font-size, color, background-color and etc to first letter or first word of the mentioned html elements. Check here for more details about "pseudo".
formal definition
Default value
NoneInherited
No
Animation type
Yes.
html code
<div class="tricks4">
<div class="pseudo firstSentence">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Hic, sit?
</div>
<div class="pseudo firstLetter">first Letter</div>
</div>
CSS code
html, body {
width:100%;
height:100%;
scroll-behavior: smooth;
background:linear-gradient(to right, #fbd3e9, #bb377d);
}
.pseudo {
font-family: 'Raleway', sans-serif;
height:100px;
width:200px;
margin:1rem auto;
padding:1rem;
border:5px double #e76f51;
border-radius:.3rem;
}
.firstSentence::first-line {
background: #264653;
color:white;
}
.firstLetter {
background-color:#2a9d8f;
}
.firstLetter::first-letter {
font-size: 3rem;
}
Margin:auto
There comes a time when we have to align html content horizontally and vertically. We can use Position, Margin:auto,CSS flexbox,CSS Grid.
we can easily horizontal center the text using text-align:center; But layouts cannot be centered using text-align:center. So one of the easiest way for horizontal centering is by using margin:auto. The items/layouts can be placed in the left, right side of the container with the help of margin.
Check here for more details about "CSS margins".
formal definition
Initial Value
NoneApplies to
All elements;
Inherited
Yes
Commonly used method,simple alignment
margin:auto;
html code
<div class="tricks3">
<div class="vertical__Center line1">
line Height, only single-line
</div>
<div class="vertical__Center line2">
line Height, more than two-line
</div>
</div>
CSS code
html, body {
font-family: 'Raleway', sans-serif;
width:100%;
height:100%;
}
* {
box-sizing:border-box;
}
/*B careful with padding while using line-height for
verical centering, it shows weired behavior*/
.vertical__Center {
height:200px;
width:200px;
line-height: 200px;
margin:2rem;
border-left:8px solid #f3b05a;
padding-left:1rem;
}
.line1 {
background-color:#a3586d;
}
.line2 {
background-color: #5c4a72;
}
.tricks3 {
overflow:hidden;
}
Line-height
while making navigation bar, that time we need to vertically center the text. But one point to remember in css is that we need to reduce the code lines, which means use less code line but get the same output. So with the single syntext, line-height:height, vertical is centered.Mention line-height should be same as height of the container, then it will be centered.Be careful with padding while using line-height.mostly this tricks is use for single line sentence. Using line-height to center vertically for more than single sentence line will show really weired behavior. Check here for bonus.
formal definition
Default Value
normalApplies to
All elements; it also applies to ::first-letter and ::first-line elements and all graphics element and all graphics elements.
Inherited
Yes
Animation type
Yes, either number or length.
html code
<div class="tricks3">
<div class="vertical__Center line1">
line Height, only single-line
</div>
<div class="vertical__Center line2">
line Height, more than two-line
</div>
</div>
CSS code
html, body {
font-family: 'Raleway', sans-serif;
width:100%;
height:100%;
}
*{
box-sizing:border-box;
}
.vertical__Center {
height:200px;
width:200px;
line-height: 200px;
margin:2rem;
border-left:8px solid #f3b05a;
padding-left:1rem;
}
.line1 {
background-color:#a3586d;
}
.line2 {
background-color: #5c4a72;
}
.tricks3 {
overflow:hidden;
}