Scribd Logo
Upload

Welcome to Scribd!

  • CSS Notes Part 2

    Uploaded by

    asif khan
    11 views12 pages

    Original Title

    CSS NOTES PART 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    11 views12 pages

    CSS Notes Part 2

    Uploaded by

    asif khan

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 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