"How to achieve" CSS code snippets

Share & showcase
35

@Klaas @Rainbow_CH

Tutorial video:

The good news: I kept my promise and recorded a video on how to do these snippets
The bad news: It was over 3 hours long and was mostly me rambling and going off on tangents.
The better news: I was procrastinating important things this weekend.
How is that better news?: It means that I downloaded resolve then spent the entire weekend playing around with it. I also managed to edit 3 hours of content down to under 12 mins.

Here’s a link: https://youtu.be/Q5GifDMEYSw

Image Pseudo Class Snippet:

Here is the code for the image snippets. Most of the attributes are customizable so feel free to change them to fit your theme/use case. You can also copy/paste and change the reference to make as many different pseudo classes as you want.

div[src$="#portrait"] {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  clip-path: ellipse(32% 45% at 50% 50%);
}

div[src$="#side"] {
  position: relative;
  float: left;
  width: 35%;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 12px;
}

Side-bar Quote Snippet:

This is for making a side bar quote that is often seen in webpages, books, physical print media. There are some drawbacks to this (see video for details) compared to the images. Also, feel free to change the details to match your theme (especially the font options since those I chose at random and probably won’t match your theme or anything else)

div[src$="-sbq"] {
    background-color: #6096cc;
    position: relative;
    right: -20px;
    float: right;
    clip-path: polygon(0% 0%,100% 0%,100% 80%,44% 80%,20% 100%,25% 80%,0% 80%);
    width: 35%;
    margin-top: 5px;
    margin-left: 10px; 
  }
  
  div[src$="-sbq"] div.markdown-embed-link {
    visibility: hidden;
  }
  
  div[src$="-sbq"] div.markdown-embed {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  div[src$="-sbq"] .markdown-preview-view {
    padding: 3px;
    padding-left: 10px;
    padding-bottom: 40px;
  }
  div[src$="-sbq"] .markdown-preview-view p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-style: italic;
    color: black;
  }
16 Likes