Posts

positon fixed stiky , filter ,font face

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . box { height : 400 px ; width : 400 px ; background : #112afa ; position : sticky ; top : 10 px ; } . box : hover { background : red ; height : 500 px ; width : 500 px ; } . box-fixed { height : 400 px ; background : #e308cd ; position : fixed ; top : 10 % ; left : 10 % ; right : 10 % ; } p : before { content : '*' ; color : #112afa ; } p : after { content : '*' ; color : #ec0031 ; } @font-face { font-family : Sabir ; src : url ( 'img/DavysRibbons.ttf' ) ; ...
Post a Comment
Read more

Card Display flex

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . card-item { width : 200 px ; border : solid 2 px ; position : relative ; } . card-item img { width : 100 % ; } . card-item . dic { width : 40 px ; height : 40 px ; background : yellow ; border-radius : 26 px ; /* box-sizing: content-box; */ /* padding: 5px; */ position : absolute ; top : 10 px ; right : 5 px ; } . dic span { margin : auto 10 px ; } . price { background : black ; color : white ; position : absolute ; bottom : 31 px ; right : 0 px ; } . name { background : black ; ...
Post a Comment
Read more

Layer

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . height { width : 400 px ; height : 400 px ; } . div1 { background : red ; } . div2 { background : blue ; } . div3 { background : green ; } . parent { width : 400 px ; height : 400 px ; background : yellow ; } . child { width : 100 px ; height : 100 px ; background : #ff003b ; } /*position: absolute;*/ /*top: 50px;*/ /*position: relative;*/ /*top: 10px;*/ /*left: 10px;*/ </style> </head> <body> <div class ="div1 height" style =" left : 60 px ; top : 60 px ; " > Div1 </div> <div clas...
Post a Comment
Read more

position

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . height { width : 400 px ; height : 400 px ; } . div1 { background : red ; } . div2 { background : blue ; } . div3 { background : green ; } . parent { width : 400 px ; height : 400 px ; background : yellow ; width : 400 px ; height : 400 px ; background : yellow ; position : relative ; } . child { width : 100 px ; height : 100 px ; background : #ff003b ; position : absolute ; bottom : 5 px ; right : 5 px ; } /*position: absolute;*/ /*top: 50px;*/ /*position: relative;*/ /*top...
Post a Comment
Read more

visibility and cursur

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> body { cursor : url ( 'img/hand_cursor.svg' ) , auto ; } . v { height : 30 px ; background : #112afa ; } . d { height : 30 px ; background : #11fa8d ; } </style> </head> <body> <div> There may be a case when an element's content might be larger than the amount of space allocated to it. For example, the given width and height properties do not allow enough room to accommodate the content of the element. <div class ="v" > V </div> <div class ="d" > D </div> CSS provides a property called overflow, which tells the browser what to do if the box's contents is larger than ...
Post a Comment
Read more

scrollbar

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> :: -webkit-scrollbar { width : 20 px ; } /* Track */ :: -webkit-scrollbar-track { box-shadow : inset 0 0 5 px grey ; border-radius : 10 px ; } /* Handle */ :: -webkit-scrollbar-thumb { background : red ; border-radius : 10 px ; } div { background : #2a2929 ; color : white ; height : 200 px ; overflow-y : auto ; width : 200 px ; } </style> </head> <body> <div> There may be a case when an element's content might be larger than the amount of space allocated to it. For example, the given width and height properties do not allow enough room to accommodate the content of the e...
Post a Comment
Read more

UL

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> ol { list-style : url ( "img/checkmark.svg" ) ; list-style-position : outside ; marker-offset : 10 px ; } </style> </head> <body> <ol> <li> item1 </li> <li> item1 </li> <li> item1 </li> <li> item1 </li> </ol> </body> </html>
Post a Comment
Read more