DEV Community

Sewvandi Promodya Wickramasinghe
Sewvandi Promodya Wickramasinghe

Posted on • Edited on

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%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Vertical alignment

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

.nav li{
    line-height:40px;
    height:40px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

After

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

p:after{ 
    content: " -Read more… ";
    color:#f00;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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

h2 { 
   text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode
h2 { 
  text-transform: lowercase; 
}
Enter fullscreen mode Exit fullscreen mode
h2 { 
  text-transform: capitalize; 
}
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
muhimen123 profile image
Muhimen

Could have used some example images(maybe)

Collapse
 
sewvandiii profile image
Sewvandi Promodya Wickramasinghe

Yeah I might do that later 😴🥱

Collapse
 
marktiddy profile image
marktiddy

Thank you! This is such a useful post (I've bookmarked it as I tend to search for these things all the time!) :-)

Collapse
 
sewvandiii profile image
Sewvandi Promodya Wickramasinghe

Thank you ❤️