Elegant sneda sektioner med hjälp av CSS

I detta inlägg tänkte jag visa hur man får snygga sneda kanter på en div-sektion. Jag använder div-sektioner ofta vid utveckling av one-page sidor och att snedda kanterna kan göra det även elegantare.

Här nedan är ett exempel på hur färdiga resultatet kan se ut:

Det här är divven.

Nå, till utförandet. Denna korta kod är väldigt enkel men kan boosta utseendet på din sida enormt. I exemplet nedan använder jag en helt ny sektion kallad ”snedkant” men du kan även lägga till bara ”:after” delen till ett befintligt. Lägg in följande:


.snedkant {
background: #41ade5;
position: relative;
z-index: 1;
padding-top: 15%;
padding-bottom: 15%;
padding-left: 15%;
padding-right: 15%;
margin-bottom: 15%;
}

.snedkant:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
z-index: -1;
}

För att sedan lägga in det i ditt inlägg använder du följande HTML-fras:

<*div class="snedkant"><*center>Det här är divven.<*/center><*/div>

KLART!

Läs gärna mina bästa tips för att snygga till Twenty Seventeen

Mina bästa CSS rader för att göra WordPress Twenty Seventeen fantastiskt

Detta inlägg innehåller anpassad CSS för att göra WordPress egna tema Twenty Seventeen så fantastiskt som möjligt. Tanken är att inlägget sporadiskt kommer att uppdateras.


Twenty Seventeen anpassad CSS för den kräsna

För den som inte vill köpa eller bygga sitt eget tema är Twenty Seventeen ett bra alternativ men tyvärr anser jag att det är något för standardiserat. Men, genom några enkla knep går det att slipa detta grå tema till en skinande diamant.

Nedan kommer jag förse dig med anpassad CSS som du behöver antingen lägga till under Utseende -> Anpassad -> Anpassad CSS eller ladda ner ett plugin som heter ”Simple Custom CSS”. Jag rekommenderar det sistnämnda då koden ser bra mycket mer förståelig ut där.

#1 Full-width, full bredd, på samtliga sidor

Oavsett om du använder en eller två kolumner under Utseende -> Anpassad är mitt första tips att göra innehåller på sidorna bredare.

Kopiera och klistra in följande kod:

.wrap {
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 100%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 100%;
}

@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 100%;
}

.twentyseventeen-front-page .panel-content .wrap,
.site-footer .wrap {
padding: 0;
}

#primary .panel-content {
width: 100% !important;
}

.site-footer .widget-area {
padding-bottom: 0;
}

#2 Ta bort titel på sidor

Jag brukar gilla att ta bort titeln på vanliga ”sidor”, på inlägg får det gärna vara kvar. Hur som helst, det get ett renare intryck och här kommer koden:

.page .entry-header {
display: none;
}

 

#3 Ta bort header på sidor

Nästa sak jag brukar göra är att ta bort ”standard-headern”. Ett schysst alternativ är att ersätta den med SmartSlider för att få en snygg slider men vill man hålla det enkelt brukar jag bara köra en h1-titel.

.page .site-header {
display: none;
}

#4 Öka radavståndet för mer lättlästa texter

Perfekt för din blogg eller större texter. Ta bort .blog i fösta raden gör så att vi endast redigerar din bloggsida. Ta bort ”.blog” om det ska gälla hela din wordpress-sida.

.blog .entry-content {
line-height: 200%;
}

#5 Ta bort utvald bild i blogginlägg

Kan vara schysst om man vill placera den utvalda bilden på annan plats i blogginlägget eller helt enkelt inte ha den utvalda bilden synlig i blogginlägget.

.single-featured-image-header {
display: none;
}

#6 Ta bort Föregående och Nästa blogginlägg

Denna kod tar bort förslaget på föregående och nästa blogginlägg längst ner på dina blogginlägg. ”nav-previous” avser föregående och ”nav-next” nästa.

.nav-previous {
display: none;
}
.nav-next {
display: none;
}