{"id":8400,"date":"2021-05-04T21:08:00","date_gmt":"2021-05-04T19:08:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=8400"},"modified":"2021-05-04T10:16:25","modified_gmt":"2021-05-04T08:16:25","slug":"5-awesome-css-tricks","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2021\/05\/04\/5-awesome-css-tricks\/","title":{"rendered":"5 Awesome CSS tricks"},"content":{"rendered":"

Do awesome things in fewer code lines with CSS<\/p><\/blockquote>\n

Source: 5 Awesome CSS tricks every developer should know | by FAM | Apr, 2021 | Level Up Coding<\/a><\/em><\/p>\n

<\/p>\n

<\/p>\n

\n
    \n
  1. Smooth scrolling:
    \nhtml<\/span> {
    \nscroll-behavior<\/span>:<\/span> smooth;
    \n}<\/li>\n
  2. Resize images to fit
    \nimg {
    \nmax-width<\/span>:<\/span>100%<\/span><\/span>;
    \nheight<\/span>:<\/span>auto;
    \n}<\/li>\n
  3. #3: Setting an image as cursor
    \nbody {
    \ncursor<\/span>:<\/span> url<\/span>(“images\/cursor.png”<\/span>),<\/span> auto;
    \n}<\/li>\n
  4. Center anything in 3 lines of code\n
    .center {\n  width: 300px;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}<\/pre>\n<\/li>\n
  5. Set a limited content in a paragraph\n
    p {\n  -webkit-line-clamp: 5;\n}<\/pre>\n<\/li>\n<\/ol>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    Do awesome things in fewer code lines with CSS Source: 5 Awesome CSS tricks every developer should know | by FAM | Apr, 2021 | Level Up Coding<\/p>\n
    Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[127,46],"tags":[],"class_list":["post-8400","post","type-post","status-publish","format-standard","hentry","category-html","category-web"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-2bu","jetpack-related-posts":[{"id":5369,"url":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","url_meta":{"origin":8400,"position":0},"title":"8 useful CSS tricks: Parallax images, sticky footers and more","author":"Paolo Redaelli","date":"2019-03-19","format":"link","excerpt":"8 useful CSS tricks: Parallax images, sticky footers and more This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too. Sticky Footer Zoom-on-Hover Images Instant Night Mode Custom Bullet Points Parallax Images Animation with Cropped Images\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10748,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","url_meta":{"origin":8400,"position":1},"title":"My little printer-friendly CSS","author":"Paolo Redaelli","date":"2023-08-30","format":false,"excerpt":"Here is my little \"Printer friendly CSS\" that I add to each and every page using Simple Custom CSS and JS \/* override styles when printing *\/ @media print { @page { margin: 2cm; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } \/* target the first\u2026","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4923,"url":"https:\/\/monodes.com\/predaelli\/2018\/11\/17\/css-the-perfect-print-stylesheet-the-jotform-blog\/","url_meta":{"origin":8400,"position":2},"title":"CSS: The Perfect Print Stylesheet | The JotForm Blog","author":"Paolo Redaelli","date":"2018-11-17","format":false,"excerpt":"Here's something I shall add to my themes, expecially \"bollettino\" and \"qualita\": CSS: The Perfect Print Stylesheet | The JotForm Blog CSS: The Perfect Print Stylesheet by Andreas Hecht Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"a4-print","src":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":7689,"url":"https:\/\/monodes.com\/predaelli\/2020\/10\/17\/11-frontend-tricks-that-most-frontend-developers-dont-know-about-by-daniel-anderson-javascript-in-plain-english-oct-2020-medium\/","url_meta":{"origin":8400,"position":3},"title":"11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium","author":"Paolo Redaelli","date":"2020-10-17","format":false,"excerpt":"Interesting tricks you can do with HTML\/JS\/CSS Source: 11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium 11 Frontend tricks that most Frontend Developers don\u2019t know about Interesting tricks you can do with HTML\/JS\/CSS Below\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"Image for post","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/10\/10U-rN1M_Vh0a2Cs_TAnGKw.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":13395,"url":"https:\/\/monodes.com\/predaelli\/2025\/05\/21\/drop-caps-css-tricks\/","url_meta":{"origin":8400,"position":4},"title":"Drop Caps | CSS-Tricks","author":"Paolo Redaelli","date":"2025-05-21","format":"link","excerpt":"Drop Caps | CSS-Tricks The CSS3 way (no extra markup) Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support. 
     Just a normal sentence. <\/p> p:first-child:first-letter { color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px;\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9114,"url":"https:\/\/monodes.com\/predaelli\/2022\/02\/26\/svgcode-for-live-tracing-raster-images-css-tricks\/","url_meta":{"origin":8400,"position":5},"title":"SVGcode for Live Tracing Raster Images | CSS-Tricks","author":"Paolo Redaelli","date":"2022-02-26","format":false,"excerpt":"A free online tool called SVGcode by Thomas Steiner is capable of an effect called \"Live Trace\" that converts a raster image into a vector image. Source: SVGcode for Live Tracing Raster Images | CSS-Tricks Also https:\/\/svgco.de\/","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/8400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=8400"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/8400\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=8400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=8400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=8400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}