Building smart websites for small businesses

Tag: css

1 to 10 of 25 posts tagged with cssview tags

Keeping aspect ratio of YouTube videos

Experiments in fixed aspect ratios is a handy CSS technique from Stephanie Liu for displaying video embeds in a responsive website without losing their aspect ratio.

The HTML:

<div class="container">
  <iframe class="embed"></iframe>
</div>

The CSS:

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25% // 9 / 16 * 100%
}
.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS ICON, not just a decent sized collection of icons made entirely with CSS but also a very slick animated function to swap between two icons.

In The Future of Loading CSS, Jake Archibald takes a look at how best to load CSS. Up to now, as CSS normally blocks page rendering, we've usually combined all styles into one file and loaded them after the main content has been downloaded. However, an update to the Chrome browser, bringing it into line with Microsoft's Edge browser, could help to change CSS loading best practise. The general idea is that we load multiple smaller CSS files that in turn render the content that directly follows it, resulting in a more progessive page render.

  1. accessibility
  2. social networking
  3. security
  4. software
  5. usability
  6. copywriting
  7. email
  8. browsers
  9. technical
  10. marketing
  11. seo
  12. news
  13. ecommerce
  14. law
  15. help
  16. business
  17. blog
  18. design
  19. css
  20. analytics
  21. mobile
  22. spam
  23. hardware
  24. cms
  25. domains
  26. fun
  27. brand
  28. misc
  29. social media
  30. advertising
  31. blogging
  32. podcast
  33. typography
  34. privacy
  35. services
  36. clients
  37. rss

©Doepud 2006–2017. All rights reserved.