Scribd
Upload
78 views

CSS Notes Part 2

Uploaded by

asif khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
78 views

CSS Notes Part 2

Uploaded by

asif khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 12
CSS bnradients C8s gradients let you display ssmooth -tramition, | blw +w. or more specified colovs. ae ass defines Haren types vi gene => Linear brvodients Ugows devon | up] atl ight | diagonal D> Radial Crradlents (ef ine bby they center) => Conic. (nrodients Crotated around a cexter boint) Linear byradlient Two create a linear alee you must deine at lest too color stops. Color stops ane the colors You want to render smooth Cramsition amore: Nou con also set a Estaviatig boint arnl a direction Cov an angle) along with the gradient afer: Syyrton Dackaround Pingel Uneerr—srundient ( elévection, ra) lovt, color, ~--)j Diveetlons: —k Top te. Bettem (Deavtt) cadient that starts at the top Linear, and ands ot the bottom: a Right Tt starts at the let and ends ct the ‘bottom. + Disgeral Now can make a gradient: ciogoralty by specifying beth the herizental anol vertical Atacting positioyyy. Th starts oct tae top left amok qe +> bottom wage ae Using Note You can also define the angles inisheald 4 predefined direction. Syntax Dock round -imege WWner-gradient Congle colors yee ey) ; Racial Grradlient A radial Pr to Aefined by its cerrhey, To crete a vodial gradient \you must also lefine at least uso color Stop. Syrttex. bae ee “rege: oolta| Potethsmee size ect position, colort , color2 ---); > By defavt- shabe Ws ellipac. Rebacctirg a Racial Groolient By voing this you can also vepact the vodial gradient - Sy rrtan, background ime e: wepeerting roelial —graelient Leelev , colev2-),| Conte trradient Lexplove: me] fr conte qredien* om gradient wits coloy transition ‘vototed around a center boint. To crete a conte vad tent you must define at least e900 colo. Peer ame ee recone cesar conte “4 vadient Leolort color2 - y Teach ground image ‘ ay & defaott angie tsp Og eg and Poartion ta Canter > Y no one is sbeci tel, the colors will be epreaal equally around the center botnt- C&S Shadow Effects With css you can adel shadow to +exet and +o elements. de tact -shodow *% bex~shaclow Taet Shadow We C88 texet—shéolow Property abbli« shoolaw to tects Syrttor tect-sheadew 1 2px 2px valved valua values ; horizontal Varitea) Blur shit shift Get Ex p i stort shoolow | LPR 2PR Yeol; Hallo > By olga shadows color ts ame as tect color - Box By deft shaolow colox is come ow tect color. O. How can we ade bovoler Using shadow ? We can add border usi Shadows by Putt horizontal shift value and” verteal shift value aa px: => Muth ble shoolews can be oololeol val comma . > Color of the shadow can be chang éol => Spread vootus can be changed. CSS Dimension Properties: =o Helgnt he height property se vseol +o cet +the eal a the or. ‘ : -k Widetin The width preperty We used: to set the voto 4 a bom. a colin TH ts usel to cet maximum height thet can a box attains “ae Min height T+ tS used to set minimum height that a box can bar kK Mare —usidkth Tt tw vsed to set marimum wltolHy dhat a box can be: kK Min — width Th ty vseol to set minimum width that a bor can bes Neve -— Do practical dor Petter uncler stemeling.. Ov ey tow Property he overflow preperty specifi whet shou Id nabbern, | content over leurs an. elemartt!s loox This property specifies whether to lib cemtent ey +o acld gerotibar when an etemartls content ‘Ww 400 big +o dit nM o specifiecl Areal NOTE: he overfloo Property only UIOYKA do block elements volth a Speci qiedl height. Syntax evelow t visible [hidden | chip | serolt Jauto ; Values in oes Property +e Visible *& Hidden * Clip “*& Sevoll +e Auto GSS Position Property The — podtt'on Property Specifies the type 4 positioning method used dor ay element. ae Stace. Oafauke value) An element with paesition. stetic; ia not posttoned in any spectal way jt ta always poattionedk aecoveling +o. the Norma) (lew 44 pogo: Fe Relative Dn clement volt Peattion: veleckve, la position elective to its novmal position. Setting the top « right \oottem ard left properties a velotve—positionead etement will cause it. to be pejfrerted aueey (em it normal position . A Fixed An demart ustth positon: qixel) ta pesitoned velgtve +o the viewport, ushich means y+ always etays th the same place even the Pope ts Sevolled. The top, “gah bottom and left Broperticg av used fo positon the element. DAO APAPPPPPPPORPPEPPRERIIFTEENIGGIITEEA -E Absolute, © An element wrth positon: absclute; ia positioned velorive to the nearest bosi-Honed as cedstor - Horwo2vey yoo absolute poastHoneck atement has neo positonsdl ancestors, tt uaa the document bedy, and move Elo wotth the boge Acrvoll. NOTE: Abastute posttionel elements are removeol ( the nomnal {low ard can everlap elements. ac SHeky The element is positionel baseol on the User's — Sevall posit on, A- sticky element ‘toggles lw veltoctive & feel, depending on the scvell position. TmPe> Do practieal le bette laa LD “Wrenn ormgt C8S trana fon dlleo you to move, votats Kale, and ekeo elements. Ae With ‘Hranaform property You can uae ottewing metheds- translate) yotorteO StaleXO sealeY¥O stalel) Skew XO skew) * skew * wortrkt) te RRR se The tronlatet) method origina Tre We tramiatet) method moves an element ten MA cwrrrant positten accorcling to its given Param gy rs 1 ‘ ( ( ( ‘ ‘ ‘ ‘ ‘ ‘ ‘ e 6 6 e 6 € é « « « « « « ® « m Syntax ctrenafom : chranslecte (valuet, valver); se The rotate O Methool The vototet) method rotates an elemant Clockusice o¢ covurter-clockwise accor ing to a ve oltre dive ex Fransforn rotate trod) ; \ Ee THe stalels Method The Seolety method increases oy decreases the Sire q on element Caceording to the given Porometera (ev the osidth and laalght)s Ex div cvenein seale 23) y r* Scaler Sealey We con alan we sealeX and scale seperately « fe The ckewl) Method MWe

You might also like