7 fantastiska CSS3-tekniker du borde prova
Utvecklingen av CSS (Cascading Style Sheets) med HTML har varit otrolig. Det finns mängder av funktioner som Flexbox, CSS Grid och anpassade CSS-egenskaper som nyligen introducerades.
Dess kontinuerliga framsteg och enorma potential är vad som fängslar utvecklarna att prova nya CSS-tekniker och överskrida gränserna för vad den kan göra. Kombinationen av både HTML 5 och CSS3-teknik är utan tvekan en flash-killer.
Det är inte konstigt att en väl genomförd CSS-plan nästan kan styra vilken aspekt av design som helst och leda till bättre användarupplevelse, vilket är ganska nödvändigt. När allt kommer omkring har besökare vissa förväntningar när de tittar på din webbplats via en bärbar dator, stationär, surfplatta eller något annat medium.
Men vilka är de populära CSS-teknikerna? Är det inte en självklar fråga som går i huvudet när vi pratar om att designa en attraktiv användarvänlig webbplats.
Det är därför vi har kommit med några av de nya CSS-teknikerna och tipsen för att bemästra dina webbdesignfärdigheter. Var och en innehåller några förklaringar och exempel på kodavsnitt.
Så låt oss gå direkt till det!
1 Justera vertikalt med Flexbox
Tidigare utvecklare brukade ställas inför många svårigheter med att rikta in en text eller något annat element vertikalt. Men nu, efter introduktionen av den nya CSS3-specifikationen Flexbox, har det blivit mycket enklare.
Egenskapen, display: flex ger ett enkelt sätt för användare att rikta in text eller element i mitten. Här är exempelkoden!
HTML:
<div class="align-vertically">
Vertically centered!
</div>CSS:
.align-vertically {
background: #FFA500;
color: #hhh;
display: flex;
align-items: center;
height: 200px;
}I ovanstående CSS-kod beskriver display: flex Flexbox-layouten för elementet, medan align-items: center; ansvarar för den vertikala centreringen av texten.
RESULTAT:
2 Responsivt CSS Grid
Gör inte ditt rutnät till ett undantag gör det också responsivt, som allt annat i din design.
Det finns så många sätt genom vilka du kan göra ditt rutnät responsivt med CSS Grid. Och det bästa med att använda det är att du kommer att kunna skapa ett mer flexibelt rutnät som ger dig det önskade utseendet, oavsett storleken på enheten.
Utöver detta låter CSS-rutnätet dig också arbeta med ojämna och lika stora kolumner. Det är ett fantastiskt stycke teknik packad med alternativ som ger användarna frihet att ha kontroll över sin design.
Du kan använda olika brytpunkter, höjden på flera dimensioner och göra andra placeringar, som visas i exemplet nedan.
HTML:
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>CSS:
.grid
{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-auto-columns: calc((100vh - 3em) / 4);
grid-auto-flow: column;
grid-gap: 1em;
height: 100vh;
}
.grid-item:nth-child(3n)
{
background-color: purple;
}
.grid-item:nth-child(3n + 2)
{
background-color: pink;
}Fraktionsenheten (fr) som används i ovanstående CSS-kod är den flexibla enheten som separerar det öppna utrymmet enligt dina riktlinjer. Varje fr-sats är för kolumnen, sedan kan du lägga ihop luckorna och göra rutnätet klart.
RESULTAT:
3 Textanimationer
Du kanske har skapat bakgrundsanimationer med CSS, men nu påverkar det också hur användare interagerar och engagerar sig med textelementen på en webbplats. Från justering av svävaren till att få ord att sväva i luften, CCS3 har gjort allt möjligt.
Webbplatser som inte har många lockande element för att engagera sina användare kan göra det bästa av denna egenskap. Här är ett litet exempel på det.
HTML:
<div class="Menu">
<ul class="Menu-list" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick>
LIVE
<span class="Mask"><span>LIVE</span></span>
<span class="Mask"><span>LIVE</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick>
LAUGH
<span class="Mask"><span>LAUGH</span></span>
<span class="Mask"><span>LAUGH</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick>
LOVE
<span class="Mask"><span>LOVE</span></span>
<span class="Mask"><span>LOVE</span></span>
</ul>
</div>CSS:
$perspective: 60rem;
$font-size: 5.25rem;
$split-position: 50%;
$split-thickness: 3px;
$split-color: #FF2C75;
%font-settings {
font-family: "Comic Sans MS", system-ui, sans-serif;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-webkit-font-kerning: normal;
-webkit-text-size-adjust: 100%;
}
html,
body {
width: 100vw;
height: 100vh;
}
body {
@extend %font-settings;
background: linear-gradient(45deg, #02001F,#008080);
transform-style: preserve-3d;
transform: perspective($perspective);
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.Menu-list {
font-size: $font-size;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transform: rotateX(-10deg) rotateY(20deg); // overwritten by JS
}
.Menu-list-item {
position: relative;
color: transparent;
cursor: pointer;
&::before {
content: '';
display: block;
position: absolute;
top: $split-position;
left: -10%;
right: -10%;
height: $split-thickness;
border-radius: $split-thickness;
margin-top: -($split-thickness / 2);
background: $split-color;
transform: scale(0);
transition: transform .8s cubic-bezier(.16,1.08,.38,.98);
z-index: 1;
}
}
.Mask {
display: block;
position: absolute;
overflow: hidden;
color: $split-color;
top: 0;
height: $split-position;
transition: all .8s cubic-bezier(.16,1.08,.38,.98);
span { display: block; }
}
.Mask + .Mask {
top: $split-position - 0.1;
height: 100 - $split-position + 0.1;
span { transform: translateY(-$split-position); }
}
.Menu-list-item:hover,
.Menu-list-item:active {
.Mask { color: #FFF; transform: skewX(12deg) translateX(5px); }
.Mask + .Mask { transform: skewX(12deg) translateX(-5px); }
&::before { transform: scale(1); }
}Så här kan du också skapa flera dynamiska textelement för din webbplats. Är det inte kul?
RESULTAT:
4 kolumner layout
Vanligtvis skapas kolumnbaserade layouter med hjälp av Javascript, vilket är ganska komplicerat och tidskrävande. Men CSS har tagit en väg runt för att förenkla uppgiften för utvecklare och webbdesigners.
Följande är CSS-kolumnregeln genom vilken du kan skapa en kolumnbaserad layout för din webbplats.
HTML:
<div class="container">
Place a container component in order to start building the format. Sometimes you may be able to get rid of the container later, but getting the container component makes it easier to handle across different web browsers for most fixed-width layouts. It defines how wide the content of the web page will be, as well as any external margins and inside padding.
</div>CSS:
.container {
/* Old Chrome, Safari and Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: solid;
-webkit-column-rule-width: 4px;
-webkit-column-rule-color: orange;
/* Old Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: solid;
-moz-column-rule-width: 4px;
-moz-column-rule-color: orange;
/* Standard syntax */
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 4px;
column-rule-color: orange;
}RESULTAT:
5 Skärmorientering
Många tror att skärmorientering och enhetsorientering båda fungerar för samma syfte. Men så är inte fallet. Skärmens orientering är lite annorlunda än enheten.
Även om en enhet inte kan upptäcka dess orientering kan en skärm alltid göra det. Och om enheten också är kapabel är det bra att ha kontroll över skärmorienteringen så att du kan underhålla eller ändra gränssnittet på din webbplats.
Det finns 2 sätt på vilka en skärmorientering kan hanteras; CSS eller Javascript. Men det är enkelt när du gör det med CSS Orientation Media Query. Eftersom det gör det möjligt för innehållet att justera sitt format, oavsett om webbläsarfönstret är i liggande eller stående läge. För att förstå bättre, låt oss titta på följande exempel.
HTML:
<ul id="toolbar">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<p>If you want a button bar to stretch along the device's longest display dimension. You can do that quickly and automatically by using a media query.</p>zzzzz
CSS:
/* First let's define some common styles */
html, body {
width: 100%;
height: 100%;
}
body {
border: 1px solid black;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p {
font : 1em sans-serif;
margin: 0;
padding: .5em;
}
ul {
list-style: none;
font : 1em monospace;
margin: 0;
padding: .5em;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: black;
}
li {
display: inline-block;
margin: 0;
padding: 0.5em;
background: white;
}
/* For portrait, we want the toolbar on top */
@media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape, we want the toolbar stick on the left */
@media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
li + li {
margin-top: .5em;
}
}RESULTAT:
6 kommaseparerade listor
Det råder ingen tvekan om att punktlistor är mycket vanliga i skrift för att förmedla all information mer exakt och tydligt. Men en sak som de flesta kämpar med är att lägga till kommatecken på varje punkt i listorna.
Med det här nedan nämnda kodavsnittet kan du enkelt lägga till kommatecken på din lista förutom det sista.
HTML:
<ul>
<li>Apple</li>
<li>Pineapple</li>
<li>Custard Apple </li>
</ul>CSS:
body{
font-family: Arial;
font-size:30px;
}
ul > li:not(:last-child)::after {
content: ",";
}RESULTAT:
7 Animerad kryssruta
Tja, de flesta människor är mycket medvetna om CSS-bakgrunden och textanimationer. Men det är inte många som vet om kryssruteanimationer.
Ja, förutom bakgrund och texter kan du också få din kryssruta-sektion att se visuellt tilltalande ut. Är det inte bra?
Nedan är ett exempel som du kan hänvisa till:
HTML:
<h1>Animated checkboxes using iconfonts</h1>
<!-- A list of checkboxes -->
<ul>
<li>
<input type="checkbox" name="one" id="one" />
<label for="one">Create checkbox</label>
</li>
<li>
<input type="checkbox" name="two" id="two" />
<label for="two">Assign label</label>
</li>
<li>
<input type="checkbox" name="three" id="three" />
<label for="three">Import iconfont</label>
</li>
<li>
<input type="checkbox" name="four" id="four" />
<label for="four">Iconify label pseudo elements</label>
</li>
<li>
<input type="checkbox" name="five" id="five" />
<label for="five">Animate icon widths</label>
</li>
<li>
<input type="checkbox" name="six" id="six" />
<label for="six">Color the icons</label>
</li>
</ul>CSS:
@import
(import 2 fonts one or heading and other for text)
h1 {
font-size: 15;
padding: 12px;
text-align: center;
}
ul {
width: 290px;
margin: 0 auto;
}
ul li {
list-style-type: none;
padding: 10px;
}
/*Adding custom checkbox icons*/
label {
position: relative;
padding-left: 30px;
font-size: 14px;
cursor: pointer;
}
label:before, label:after {
font-family: FontAwesome;
font-size: 21px;
/*absolutely positioned*/
position: absolute; top: 0; left: 0;
}
label:before {
content: 'f096'; /*unchecked*/
}
label:after {
content: 'f046'; /*checked*/
/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
/*CSS3 transitions for animated effect*/
transition: all 0.35s;
}
/*hiding the original checkboxes*/
input[type="checkbox"] {
display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"]:checked + label:after {
max-width: 25px; /*an arbitratry number more than the icon's width*/
opacity: 1; /*for fade in effect*/
}
/*adding some colors for fun*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}RESULTAT:
Omslutande ord:
Om vi går djupt ner så är möjligheten till CSS och HTML oändlig. Därför hoppas vi att de ovan implementerade teknikerna hjälper dig att få lite kunskap och kommer att vara till hjälp för dig när du designar en fantastisk webbplats.