Tag: media

How to create a creative rotated text border effect & social media icons hover transforms using HTML & CSS?

by rajeshkumarCSSLeave a Comment on How to create a creative rotated text border effect & social media icons hover transforms using HTML & CSS?

In this blog, I am creating a creative rotated text border effect & social media icons hover transforms using HTML & CSS. So, Let’s create an index.html & style.css below-

Creative rotated text border effect using CSS transforms after hover
Fill Text Effect On Hover before hover
Fill Text Effect On Hover after hover
social media icons hover effect with CSS transforms before hover
social media icons hover effect with CSS transforms after hover
Tagged : / / / / / / / / /

How to use different types of Media Features in CSS?

by rajeshkumarCSSLeave a Comment on How to use different types of Media Features in CSS?
  • any-hover – Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
  • any-pointer – Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
  • aspect-ratio – The ratio between the width and the height of the viewport
  • color – The number of bits per color component for the output device
  • color-index – The number of colors the device can display
  • grid – Whether the device is a grid or bitmap
  • height – The viewport height
  • hover – Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
  • inverted-colors – Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
  • light-level – Current ambient light level (added in Media Queries Level 4)
  • max-aspect-ratio – The maximum ratio between the width and the height of the display area
  • max-color – The maximum number of bits per color component for the output device
  • max-color-index – The maximum number of colors the device can display
  • max-device-aspect-ratio – The maximum ratio between the width and the height of the device
  • max-device-height – The maximum height of the device, such as a computer screen
  • max-device-width – The maximum width of the device, such as a computer screen
  • max-height – The
  • max-monochrome – The maximum number of bits per “color” on a monochrome (greyscale) device
  • max-resolution – The maximum resolution of the device, using dpi or dpcmmaximum height of the display area, such as a browser window
  • scan – The scanning process of the output device
  • scripting – Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
  • max-width – The maximum width of the display area, such as a browser window
  • min-aspect-ratio – The minimum ratio between the width and the height of the display area
  • min-color – The minimum number of bits per color component for the output device
  • min-color-index – The minimum number of colors the device can display
  • min-device-aspect-ratio – The minimum ratio between the width and the height of the device
  • min-device-width – The minimum width of the device, such as a computer screen
  • min-device-height – The minimum height of the device, such as a computer screen
  • min-height – The minimum height of the display area, such as a browser window
  • min-monochrome – The minimum number of bits per “color” on a monochrome (greyscale) device
  • min-resolution – The minimum resolution of the device, using dpi or dpcm
  • min-width – The minimum width of the display area, such as a browser window
  • monochrome – The number of bits per “color” on a monochrome (greyscale) device

  • update-frequency – How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
  • width – The viewport width
  • orientation – The orientation of the viewport (landscape or portrait mode)
  • overflow-block – How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
  • overflow-inline – Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
  • pointer – Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
  • resolution – The resolution of the output device, using dpi or dpcm
Tagged : / / / / / / / / /

How to use Media Query in CSS for a responsive webpage?

by rajeshkumarCSSLeave a Comment on How to use Media Query in CSS for a responsive webpage?

A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color.

Syntax: –

@media not|only mediatype and (expressions/ media features) {   CSS;  }

Ex: –

@media screen and (min-width: 480px) {

    body {

        background-color: lightgreen;    }

}

@media (min-width: 480px) {

    body {

        background-color: lightgreen;    }

}

  • all – Used for all media type devices
  • print – Used for printers
  • screen – Used for computer screens, tablets, smart-phones etc.
  • speech – Used for screenreaders that “reads” the page out loud

If you use the not or only operators, you must specify an explicit media type.

And-

  • @media (min-width: 800px) { CSS }
  • @media (min-width: 800px) and (orientation: landscape) { CSS }
  • @media screen and (min-width: 800px) and (orientation: landscape) { CSS }

Or (Comma , )-

  • @media (min-width: 800px), (orientation: landscape) { CSS }

Not-

  • @media not all and (min-width: 800px) { CSS }
  • @media not (all and (min-width: 800px)) { CSS }
  • @media (not all) and (min-width: 800px) { CSS }
  • @media not screen and (color), print and (color) { CSS }
  • @media (not (screen and (color))), print and (color) { CSS }
Tagged : / / / /