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

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 ...
Post a Comment
Read more

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 ...
Post a Comment
Read more