CSS tricks🔮

CSS can get tricky, and you should too.🤫

Curve Text Around a Floating Image

shape-outside is a CSS property that allows geometric shapes to be set in order to create a text region that can float around.

.circle{
  width: 100px;
  float: left;
  shape-outside: circle(50%);
}

Easily resize images to fit in

You often get into a pinch where images have to match a given width, while proportionally scaling. An easy way to do this is to use the maximum width to handle it. Here is an example of this,

img {
    max-width:100%;
    height:auto;
}

Absolute positioning

If you want to control where an item is always positioned on your web, absolute positioning is the key to this.

position:absolute;

Use SVG for icons and logos

All modern browsers and sizes are supportive of SVG for all resolution styles. There is no need to use.jpg or.gif images for logos or icons. The following code is the CSS code for displaying a website logo,

#logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 80px;
  background: url(logo.svg);
  background-size: 100px 80px;
}

Overriding all styles

If you want to override a different CSS style for a specific element, use! Important after your css theme. For a particular region of my web , for example, I would use the following CSS if I wanted the H2 headers to be red, not blue.

.section h2 { color:red !important; }

Vertical alignment

The trick is to keep the menu height and the text line height same.

.nav li{
    line-height:40px;
    height:40px;
}

Hover

This can be used for buttons , text links, your site bock sections, icons, etc. If you want to change colors while someone is hanging over your keyboard, use the same CSS, just add: hover and change style.

.a h2{
    font-size:42px;
    color:#000;
    font-weight:600;
}

.a h2:hover{
    color:#f00;
}

Apply CSS to multiple classes, or selectors

Only claim that all the photos, the blog and the sidebar have the same boundary. You need not write the exact same CSS 3 times. List the items separated by commas.

.blog, img, .sidebar {
    border: 1px solid #000;
}

Before

This CSS is a selector that you can pick a CSS object and insert content in front of each element with a particular class. Let's assume that before any H2 tag you had a website you needed unique texts.

h2:before { 
    content: "Continue: ";
<span class="Apple-converted-space">    color: #F00;</span>
}

After

You can use :after to insert content globally on specific elements

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

Drop caps

That 1st, big letter really catches your attention. There is an simple way to construct a drop cap in css, and it's by using the pseudo element: :first letter.

a:first-letter{
    display:block;
    float:left;
    margin:5px;
    color:#f00;
    font-size:500%;
}

Force text to be all caps, all lowercase, or capitalized

h2 { 
   text-transform: uppercase;
}

h2 { 
  text-transform: lowercase; 
}

h2 { 
  text-transform: capitalize; 
}

Links

It shows visitors to the website where they've already been on your site, and where they've yet to discover.

a:link { color: blue; }
a:visited { color: purple; }

What is your opinion here? Share your thoughts in the comments :)