Sie sind auf Seite 1von 5

STEP

BY

STEP

GUID E

CSS in 44 minutes

Build your own webpage from scratch

GUID E CSS in 44 minutes Build your own webpage from scratch Written by Jeremy Thomas
GUID E CSS in 44 minutes Build your own webpage from scratch Written by Jeremy Thomas
GUID E CSS in 44 minutes Build your own webpage from scratch Written by Jeremy Thomas
GUID E CSS in 44 minutes Build your own webpage from scratch Written by Jeremy Thomas

Written by

Jeremy Thomas

© Copyright 2018 – Jeremy Thomas

5Stylingallelements

5 Stylingallelements Thepicture Theshadowisseparatedfromtheimagebecausewearegoingto animate themseparatelylateron. Inthe

Thepicture

Theshadowisseparatedfromtheimagebecausewearegoingtoanimatethemseparatelylateron.

animate themseparatelylateron. Inthe 2. Shared sectionoftheCSS,updatethelistof selectors
animate themseparatelylateron. Inthe 2. Shared sectionoftheCSS,updatethelistof selectors

Inthe 2. Shared sectionoftheCSS,updatethelistofselectorsandaddboth .picture-shadow and

.picture-image :

.wallpaper,

.picture-shadow,

.picture-image {

display: block;

height: 100%;

left: 0;

top: 0;

width: 100%;

}

: 100% ; left : 0 ; top : 0 ; width : 100% ; }

Attheendofthe 3. Specific sectionoftheCSS,addthefollowingstyles:

.picture { padding-top: 100%; position: relative; width: 100%;

}

.picture-shadow { border-radius: 290486px; background-image: radial-gradient(#000 0%, rgba(0, 0, 0, 0) 70%); position: absolute; top: 10%;

}

.picture-image { border-radius: 290486px; position: absolute;

}

{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture
{ border-radius : 290486px ; position : absolute; } The padding-top: 100% isatechniquethatmakesthe .picture

The padding-top: 100% isatechniquethatmakesthe .picture ashighasitiswidemakingitsquare atalltimes.Italsohasa position: relative sothatitactsasareferencepointforitstwoabsolutely positionedchildren.

positionedchildren. Theshadowusesasemi-transparent radial-gradient()

Theshadowusesasemi-transparent radial-gradient() .It'sslightlyoffsettowardsthebottomwith

top: 10% .

The border-radius issettotheveryhighvalueof 290486px toensuretheelementstobe rounded .You
The border-radius issettotheveryhighvalueof 290486px toensuretheelementstobe rounded .You

The border-radius issettotheveryhighvalueof 290486px toensuretheelementstoberounded.You canuseanyextremelyhighvalue.Ipersonalyuse 290486px asatrademarkbecauseit'smydateofbirth. It'squiteinterestingtoseeitshowupinotherpeople'scode!

otherpeople'scode ! Thename

Thename

otherpeople'scode ! Thename

Thenameisthemostimportantinformationofthepage.That'swhyitusesthe <h1> HTMLtag,whichhas thestrongestsemanticvalue.Toreflectthisprominencevisuallyaswell,wearegonnamakeitbigger:

.name { font-size: 2.25rem; line-height: 1.125; margin-bottom: 0.5rem;

}

; line-height : 1.125 ; margin-bottom : 0.5rem ; } Thefontsizeusesthe rem unit:it'sthe root
; line-height : 1.125 ; margin-bottom : 0.5rem ; } Thefontsizeusesthe rem unit:it'sthe root
; line-height : 1.125 ; margin-bottom : 0.5rem ; } Thefontsizeusesthe rem unit:it'sthe root

Thefontsizeusesthe rem unit:it'stherootvalue,equaltothefontsizesetonthe html element,which wepreviouslysetto 16px .So 2.25rem isessentially 36px .Using rem isusefulbecauseitreferences acommonvalue,andwecanupdatethe html valuetosetallinstancesof rem values.

html valuetoset all instancesof rem values. The line-height issetto 1.125
html valuetoset all instancesof rem values. The line-height issetto 1.125
html valuetoset all instancesof rem values. The line-height issetto 1.125
html valuetoset all instancesof rem values. The line-height issetto 1.125

The line-height issetto 1.125 It'shardtoseeitspurposeifthetextistooshort(resizeyourbrowser toreachtwolines),butkeepingthepagevalueof 1.5 makesthetwolinestoospacedout.

1.5 makesthetwolinestoospacedout. Bestpractice Setline-heightfirst,margin/paddingsecond

Bestpractice

Setline-heightfirst,margin/paddingsecond

Somedevelopersusetheline-heightasawaytogivespacetoanelement.Butasitsnamesuggests,it's meanttodefinetheheightofasingleline,notthespacebetweeneachline. Theline-heightvalueshouldbesetforreadabilitypurposesonly. Ifyouneedtogivemorebreathingspacetoanelement,justuseabitofmargin(orsometimespadding),which iswhatwe'redoingherewith margin-bottom .

Jobtitle

Wewantthejobtitletostandoutabit.That'swhywearegoingtouseoursecondaryfont:Montserrat.

Thisfontworkswellwhenthelettersareuppercaseandslightlyspacedout.

Inthe 2. Shared section,addthissnippet: .job , .button {

Inthe 2. Shared section,addthissnippet:

.job, .button { font-family: "Montserrat", "Quicksand", sans-serif; letter-spacing: 0.3em; text-transform: uppercase;

}

Thisstyleisgoingtobeusedforourbuttonaswell,solet'saddbothselectorsrightnow.

Inthe 3. Specific section,addthefollowing: .job { color

Inthe 3. Specific section,addthefollowing:

.job { color: #ffe479; font-size: 0.75rem;

}

.job { color : #ffe479 ; font-size : 0.75rem ; }

Theuppercasestylemakesthetextquite"inyourface",sowe'rereducingthefontsizeabit,andalso

applyingashadeofyellow.

Thehrline

applyingashadeofyellow. Thehrline Thehorizontalrule( hr )

Thehorizontalrule( hr )definesasemanticbreakbetweenblocksoftext.Whilekeepingthissemantic

valueintact,wewanttomakethislinemoresubtle:

.hr { background-color: #ff470f; border: none; content: ""; height: 1px; margin-bottom: 1.5rem; margin-top: 1.5rem; transform-origin: center left; width: 4rem;

}

; transform-origin : center left; width : 4rem ; } Formorecontrol,we'reremovingthe border andusingthe
; transform-origin : center left; width : 4rem ; } Formorecontrol,we'reremovingthe border andusingthe
; transform-origin : center left; width : 4rem ; } Formorecontrol,we'reremovingthe border andusingthe
; transform-origin : center left; width : 4rem ; } Formorecontrol,we'reremovingthe border andusingthe

Formorecontrol,we'reremovingthe border andusingthe background-color withaheightof 1px to defineathinshortline.

withaheightof 1px to defineathinshortline. The transform-origin

The transform-origin willbeusedwhenweanimatethewidthlateron.

Description

Thedescriptiononlyneedstobeslightlymoreprominent.Let'sincreasethefontsize:

.description { font-size: 1.5rem;

}

.description { font-size : 1.5rem ; } ThisisafreesamplefromthebookCSSin44minutes. Getthewholebook!
ThisisafreesamplefromthebookCSSin44minutes. Getthewholebook!
ThisisafreesamplefromthebookCSSin44minutes.
Getthewholebook!