This content originally appeared on DEV Community and was authored by Pawan Bhayde
What is up everybody today i have 5 unique css techniques that i use most of the time, some techniques you already know and some don't know hopefully you enjoy's this 5 css techniques.
1. Centering Div
I am talk about centering div most of the new developers didn't know how to center child div
i have one div in white color and i want to move this div in center of the blue color parent div, How i Do..? Basically we can do this in tow methods
method 1
<div class="parent">
<div></div>
</div>
.parent{
display: grid;
place-content: center;
height: 100vh;
}
method 2
<div class="parent">
<div></div>
</div>
.parent{
display:flex;
text-align: center;
justify-content: center;
}
2. Little Graphics Line On Headline
Lat's talk about this one its not necessary to add this line on your headline but its look batter how we add this?
This method is helpful you for create this small graphics line
<h1>This Is Heading</h1>
h1{
position: relative;
}
h1:before{
content: "";
position: absolute;
}
its very very handy i use all the time
3. Adding … when text is too long
Let's look at this in 1st image product title its too lenthy and 2ed image you can see title is absolutely perfect how to fix it using css
<div class="shopping-item">
<img var="img" src="https://i5.walmartimages.com/asr/57f89337-45de-4cd4-9f05-e26a107b2644_1.5db5139ea852e09b168744041199fc59.jpeg?odnHeight=100&odnWidth=100&odnBg=FFFFFF">
<div var="title">Keurig K-Select Single Serve, K-Cup Pod Coffee Maker, Matte White</div> <i var="price">$99.00</i>
</div>
.shopping-item {
width: 300px;
position: relative;
background-color: #fff;
height: 110px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 7px;
margin: 5px;
box-sizing: border-box;
padding-left: 110px;
padding-right: 10px;
font-family: Arial, sans-serif;
}
.shopping-item>div {
line-height: 17px;
font-size: 12px;
padding-top: 10px;
color: #017ADB;
font-weight: bold;
cursor: pointer;
max-height: 68px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.shopping-item img {
width: 90px;
height: 90px;
position: absolute;
top: 10px;
left: 10px;
border-radius: 3px;
overflow: hidden;
}
.shopping-item i {
color: #FFC94A;
font-style: normal;
font-size: 14px;
line-height: 32px;
}
4. Styling Button
Styling Button Its Difficult Job for as new developer but its vary easy let's do it
Buttons are one of the elements which are used over almost every single page. In some cases, they even contain the purpose of the page e.g. buying an item, subscribing to an email list, answering a survey.
<button>
Add to Cart
</button>
button {
margin: 20px;
line-height: 50px;
min-width: 150px;
text-align: center;
font-family: Arial, sans-serif;
background-color: #FD310F;
border-radius: 5px;
color: #fff;
border: 0;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #FE712A;
}
5. Tooltips
Tooltips is a simple way to giving more info. after they hover it
its actually goods pretty lets do is fast its very simple one off the biggest issue about tooltips is positioning developer want to resize according to content.So we need something that is flexible and which position it is depending on the position of the element you want to place the tooltip over.
<div class="instagram">
<b>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>
<span class="tooltip">
<i>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>30</i>
</span>
</b>
</div>
body {
background-color: #000;
}
.instagram{
margin-top: 100px;
height: 50px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
.instagram > b{
position: absolute;
left: 75%;
width: 50px;
height: 50px;
display: inline-block;
top: 0;
margin-left: -25px;
}
.instagram > b > svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 16px;
}
.instagram > b .tooltip{
position: absolute;
left: 50%;
bottom: 60px;
line-height: 30px;
border-radius: 5px;
padding: 0 5px;
color: #fff;
transform:translateX(-50%);
background-color: #F44456;
font-size: 12px;
}
.instagram > b .tooltip:after{
width: 0;
height: 0;
display: block;
content: '';
bottom: -8px;
left: 50%;
position: absolute;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #F44456;
}
.instagram > b .tooltip i{
padding-left: 24px;
position: relative;
display: inline-block;
font-style: normal;
padding-right: 5px;
}
.instagram > b .tooltip i svg{
position: absolute;
top: 50%;
left: 12px;
transform: translate(-50%, -50%);
height: 16px;
}
Note:- visit my youtube channel for frontend tutorials
subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg
Resent post :-
This content originally appeared on DEV Community and was authored by Pawan Bhayde
Pawan Bhayde | Sciencx (2021-04-20T17:45:07+00:00) 5 CSS Techniques That I Use The Most..!. Retrieved from https://www.scien.cx/2021/04/20/5-css-techniques-that-i-use-the-most/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.