Category: CSS

Sometimes, we want to keep the header static and always on top while scrolling with CSS.

In this article, we’ll look at how to keep the header static and always on top while scrolling with CSS.

How to keep the header static and always on top while scrolling with CSS?

To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.

For instance, we write

header {
  position: sticky;
  top: 0;
}

to set the position of the header to sticky.

And we set top to 0 to keep it on the top of the page.

Conclusion

To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.

Sometimes, we want to embed fonts in CSS.

In this article, we’ll look at how to embed fonts in CSS.

How to embed fonts in CSS

To embed fonts in CSS, we use the @font-face directive.

For instance, we write

@font-face {
  font-family: "Graublau Web";
  src: url("GraublauWeb.eot");
  src: local("Graublau Web Regular"), local("Graublau Web"),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

to set the font-family CSS property to the name of the font.

src is set to the font’s location on disk.

format specifies the font format of the font file in the given location.

Conclusion

To embed fonts in CSS, we use the @font-face directive.

Sometimes, we want to make HTML text input field grow while typing with CSS.

In this article, we’ll look at how to make HTML text input field grow while typing with CSS.

How to make HTML text input field grow while typing with CSS?

To make HTML text input field grow while typing with CSS, we set the max-width style of a contenteditable element.

For instance, we write

span {
  border: solid 1px black;
}
div {
  max-width: 200px;
}

to set the max width of the container div to 200px.

Then we write

<div>
  <span contenteditable="true">sdfsd</span>
</div>

to add a contenteditable span inside the div so we can type in the span.

Conclusion

To make HTML text input field grow while typing with CSS, we set the max-width style of a contenteditable element.

Sometimes, we want to scale the contents of a div by a percentage with CSS.

In this article, we’ll look at how to scale the contents of a div by a percentage with CSS.

How to scale the contents of a div by a percentage with CSS?

To scale the contents of a div by a percentage with CSS, we can set the zoom and -moz-transform CSS properties.

For instance, we write

#myContainer {
  zoom: 0.5;
  -moz-transform: scale(0.5);
}

to scale the contents of the element with ID myContainer by a factor of 0.5 by setting zoom to 0.5 and -moz-transform to scale(0.5).

Conclusion

To scale the contents of a div by a percentage with CSS, we can set the zoom and -moz-transform CSS properties.

Sometimes, we want to force website to show in landscape mode only with CSS.

In this article, we’ll look at how to force website to show in landscape mode only with CSS.

How to force website to show in landscape mode only with CSS?

To force website to show in landscape mode only with CSS, we can set the width of the page in different orientations.

For instance, we write

@media only screen and (orientation: portrait) {
  #wrapper {
    width: 1024px;
  }
}

@media only screen and (orientation: landscape) {
  #wrapper {
    width: 1024px;
  }
}

to set the element with ID wrapper to width 1024px in portrait and landscape orientation.

Conclusion

To force website to show in landscape mode only with CSS, we can set the width of the page in different orientations.