Posts

Showing posts from April, 2024

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' ) ; ...

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 ; ...

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...

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...

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 ...

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...

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>

Padding Margin

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . div1 { border : solid 2 px red ; } . div2 { border : solid 2 px #4187ee ; } . p { border : solid 2 px #2ee221 ; } </style> </head> <body> <div class ="div1" > <div class ="div2" > <p class ="p" > The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater ...

a Tag Table

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <meta name ="viewport" content ="width=<>, initial-scale=1.0" > <title> Document </title> <style> . body { background-color : #323275 ; background-image : url ( 'img/goldencar.png' ) ; background-size : contain ; background-repeat : no-repeat ; background-position : center ; height : 500 px ; width : 500 px ; background-attachment : fixed ; } a { color : #08085f ; } a : active { color : orange ; } a : hover { color : greenyellow ; } a : visited { color : red ; } table . auto { table-layout : auto } table . fixed { table-layout : fixed } img . border { width : 300 px ; height : 300 px ; object-fit : scale-down ; border : solid ; border-width ...