9781983065637
CSS Visual Dictionary
by: Greg Sidelnikov
ISBN-10: 1983065633
ISBN-13: 9781983065637
Publication Date 出版日期: 2018-06-11
Print Length 页数: 168
Disclaimer for Kindle，IOS and Android-based Readers
CSS Propertiesand Values
pLacement
Simple Assiqnments
csS Comments
Assignment Paterns
-ALEgD
Sacc/srsc
heldea Behind CascadingStyle Sheets
Cs5Seleetors
Foraiving Nature
3TONUE
Shorthand Properties
Pseudo Selectors
CSSBox Model
D..A
Working With Text
Tet Alan
Text Alian Last
LSN9I上O
LH。L
Text Rendering
XcheHuGtTIng
Tevt Orientation
-c-c
Margin，Rounded Comers，BoxShadow andZ-lndex
DAPLaPDaH.
ROrOET haOINS
MNIKeL09o
Element Visibilty
Floating Elements
Color CGra diants
color Gradients
Galiant Tpe
Backaround lmages
Specifyina Multiple Values
pecltying uiunteple Values
M..L.D.1
MUILIPIE DaCKgTCunOS
MAl% pa-LopAm1.
backaroandatazhmen
.
backgroundorigin
Eliptical Border Radius
HPTICOLbOTOeT iOI
2D ITransforms
uallblaE
transform-orioin
transform origin
GWsIoIS
W.1。
rotatel and rotatez
，.
eating A 3T
Creating A 3D Cube
isplay-fley
SplayiHX
Main-axisand Cross-axis
birection
“OP
ugti/ontent
Justly conuent
Packing flex lines
align-items
AY9的户
g心
iex-shrink
.68.ton。
JOyTIEID
ccot.n。yo
Creating Your First CSS Grid
Implicit Rows and Columns
grid-auto-rows
Automatic Column CellWidth
Gaps
Repeating Values
Spans
However..… there is a solution.
Start and End
Start and End’s Shorthand
What if we need to reach the absolute maximum boundary ofthe grid?
Content Align Within CSS Grid ltems
Good news for you then.
align-self
You can use values start,centerand end.
justify-self
Another property that does the same thing but horizontally is justify-self
Template Areas
Although only 5 items are present template are names can logistically occupy places not yet filled with items:
Naming Grid Lines
grid-template-columns: teft] 5px 5px[ middle] 5px5px[ right]
cleardoublepage
Tesla CSS Art
Below is a CSS model of Tesla
Note how
Of course you canstilrewrite this in standard vanilla CSS by replacing
. Hiding the overflow is what helps us get away with creating more complex,irregular shapes that closely describe real-life objects}
To see the original CSS code for the Tesla on codepen. io visit the following URL:
