Back to Top

Tag Archives: css

12 Websites with Stunning Background Images [+ Best Design Practices]

Updated on by

Background images can help attract, engage, and inform visitors on your website. Depending on their design and position, background images can establish a mood, provide context about a brand, and draw visitors’ attention to important elements on a web page.

In this post, we’ll go over the two different types of website background images you can use and then walk through real examples of websites with these types of backgrounds. Then we’ll cover some best practices for using background images in your own website designs. Let’s get started.

Background Images for Web Pages

Before you start your search for the perfect background image, you have to know some basic information about website backgrounds in general.

There are two types of website backgrounds: a body or content background. A body background covers most of or the entire screen. It can be an image, graphic illustration, single color, color gradient, or texture. A content background surrounds text, images, or other content, and can be layered on top of the body background.  

Take the homepage of our blog, for example. The body background is white, whereas the content background is a light blue. The content background helps group the featured image, title, category, and read time of the individual blog posts together. This can help visitors browse the blog easier and make more informed choices of what to click on.

When using background images for your web pages, you can use images as the body background and place text directly over it. This is a common approach for creating a striking homepage. You can also use an image (or several) as the content background, layered over a single color body background. This is a common approach for portfolio sites.

Let’s take a look at some examples of website background designs below.

1. Warszawski UL

website with background image: Warszawski UL features background images with same blue as logo

Warszawski UL is an interactive website that uses scrolling animations and big background images to capture and sustain visitors’ attention. Each image offers a closer look at the interior of the serviced office.

What we like: Each background image included in the homepage slider contains shades of blue that match the color used in the logo and other design elements, making the overall design more cohesive.

2. Corvette Care

website with background image: Corvette Care features background image slider with hover animations

Corvette Care is an image-rich website. Its homepage includes a hero image slider that is triggered when the user hovers over one of the words representing the company’s services. This is a visual way to show that the company not only offers basic maintenance and upkeep — but is also one of the nation’s premier Corvette restoration and performance facilities.

What we like: Rather than show three images side-by-side, this site uses a slider of different background images to represent its range of services, which is triggered by the user hovering over text.

3. Addictions Design

website with background image: Addictions Design uses background images to create virtual showrooms

Addictions Design features many types of background images: some are full-body, layered, and featured in unique sliders. These background images help accomplish the company’s mission, which is to exhibit collections of artisans and furniture firms.

What we like: The background images, particularly the full-body website background image in the hero section of the homepage, make you feel like you’re stepping into one of Addictions Design’s showrooms.

4. ThruDark

website with background image: Thru Dark layers product images over background images of austere landscapes

ThruDark combines background images and videos with a dark color scheme to convey the different climates and activities that its products are designed to work for, whether that’s an expedition in extreme cold tundras or humid jungles.

What we like: Product images are layered over images and videos of landscapes, emphasizing that ThruDark’s clothing and equipment are developed to assist customers in the most arduous environments.

5. Colossal

website with background image: Colossal uses background images to visually explain its mission of de-extinction

Colossal uses bold colors, images, and animations to tell the story of how it will create a path to de-extinction. The page dedicated to its landmark de-extinction project — the resurrection of the Woolly Mammoth — uses background images and animations to effectively explain what this species is and what its goals are for reviving it.

What we like: The background images combined with animations and other effects make this website as engaging as it is informative.

6. INSPiiR

website with background image: INSPiiR uses background images with semi-transparent overlays to make text easier to read

INSPiiR showcases the INSPiiR Saint-Sauveur district with big background images across its site. The site uses opacity to make these background images somewhat transparent and darker, so it’s easy to read the text on top.

What we like: Semi-transparent overlays ensure that the text is still easy to read without obscuring the background images.

7. Morris Adjmi Architects

website with background image: Morris Adjmi Architects features full-body background images with only the logo and menu button in corners

MA’s website is designed to fulfill the studio’s mission of creating buildings that stand out. To this end, the homepage features a hero image slider with an almost austere navigation bar with only the logo and button labeled “menu.” This ensures that MA’s projects are the focal point.

What we like: A minimalist navigation bar keeps the focus on the background images, which feature projects from the studio’s portfolio.

8. hipcool Studio

website with background image: hipcool Studio juxtposes colorful background images against stark white content background

hipcool Studio is a minimalist website that masterfully uses whitespace, clean typography, and a white background color to make images from its portfolio stand out. Since the images are the only source of color (aside from the logo), they draw the visitor’s attention and keep it.

What we like: The site juxtaposes large, colorful background images with a stark white content background to really make the images pop.

9. Goldling Drinks

website with background image: Goldling Drinks features a graphic background image of a golden desert

Like the products, the website of Goldling Drinks is designed to transport visitors into the world of its drinks’ flavor. To do so, it has a dreamy and playful graphic background that captures the “golden hour.”

What we like: The website background is composed of graphic illustrations that evoke the playfulness and complexity of its products and brand.

10. K+

website with background image: K+ uses background images with details that draw focus to text at the center

K+ is one of the best photography portfolio websites. Its homepage features a hero slider with background images that look like full-body images until the user scrolls. The photos are perfectly chosen: the composition draws the eye to the centered text and scrolling arrow and to the logo and hamburger menu button in the corners.

What we like: The background images are colorful and detailed but manage to draw attention to — rather than distract — from the logo, menu button, text, and scrolling icon.

11. JVN

website with background image: JVN features background images showcasing products, ingredients, and results

JVN’s website is focused on the ingredients that make these products different, which is reflected in the copy as well as in the videos and images. The background images showcase the products, their specific ingredients like sugar cane, as well as the results on real people’s hair.

What we like: The header background image juxtaposes a texture that looks like the product with an image of the founder holding the bottled product to showcase it in multiple ways.

12. Parques de Sintra

website with background image: Parques de Sintra uses background images to show different parks and places in town

Parques de Sintra is designed to help visitors discover the many different ways to explore Sintra. To do so, it uses multiple image sliders. In its header section, for example, an animated image slider shows slices of images featuring Sintra’s many parks, monuments, and places. This is a great way to show that one person’s journey through the town may look very different from another’s.

What we like: This website’s paneled hero image slider is a clever way to feature multiple background images without taking up much space.

Website Background Image Best Practices

A background image on a web page has to do more than look good — it also has to enhance the user experience in some way. Let’s walk through some best practices so you can pick a background image that helps convey your brand and provide visual cues to your visitors.

1. Select high-quality images.

In terms of background images, quality refers to composition, resolution, and size. First, background images should have enough negative space and color contrast to make any overlaid text easy to read. Here’s an example:

website background with negative space where text is positioned

Website background images should also be at least 72 pixels per inch (ppi) and 1920 pixels wide x 1080 pixels high ideally, according to NW Media Collective. This ratio of 16:9 is considered ideal because it spans the webpage without compromising the quality of the image.

2. Make text stand out.

If using a background image, then you need to ensure text stands out so visitors can read it. You can do so in a number of ways: by using contrasting colors, or a solid color content background in between the text and background image, or overlays on the images. You can also position the text over the darker, or lighter, parts of the background image.

Notice in the example below that the white content background helps the logo and text stand out against the body background.

website background with detailed image as body and white content background surrounding text

3. Ensure images are responsive.

It’s essential that a background image is responsive so it adjusts to all screen sizes without noticeably impacting your website’s performance. To ensure images are responsive, you should:

  • Set the CSS background-size property to “cover.” This value tells the browser to scale the background image’s width and height so that they are either equal to, or greater than, the viewport’s dimensions.
  • Add a media query. This will tell the browser to serve a smaller background image for mobile devices, which will reduce the payload and therefore improve load times.

For a more detailed look at all the code required to make background images responsive, check out How to Add an Image & Background Image in HTML.

4. Place bold, colorful images in the header.

If you have an image with bold colors or illustrations, consider putting it in the header section of your homepage. That way, you can immediately establish your brand personality and website’s mood, and then place more text-heavy content below. Here’s an example of a video header followed by a more minimalist section:

website background with bold image in header section followed by text-heavy section

Using Background Images in Your Design

Using a website background image can help immediately capture a visitor’s attention, tell a story, and provide important visual clues. Using one will require you to consider file sizes, load times, text color, and other factors — but when done right, background images will make your site more engaging and memorable.

You can read original article by Anna Fitgerald here

10 amazing games to learn CSS

Updated on by

Learning CSS can be quite a challenge. There are no shortcuts, and you will have to get your hands dirty and dive into the magical world of CSS.

But! There are some fun ways to learn this monster called CSS. This article will highlight ten amazing games you can play to learn CSS.

1. Flexbox froggy

Flexbox froggy CSS game

Flexbox froggy was one of the first CSS-solving games I’ve played, and I love it. It’s a super fun way to learn flexbox positions across the board.

You use CSS flex to place the frog on the correct Lilly. It has 24 levels, and you can quickly see the results.

2. Flexbox defense

Flexbox defense CSS game

Another super cool CSS game to learn flex is flexbox defense. In this game, you have to move around towers to defend a road from being attacked.

It has 12 levels, and it’s pretty cool to see multiple answers can be correct.

3. Knights of the Flexbox Table

Knights of the Flexbox table CSS game

If you love Tailwind, this one is amazing! It uses tailwind classes to teach you to flex options. A super combination if you ask me, and it’s well set up.

There are a total of 18 levels that you can clear.

4. Flex Box adventure

Flex box adventure CSS game

Another game much like Flexbox froggy, but with a different setup. It also has some other challenges and hints from which you might learn a lot.

It has a total of 24 levels you can clear.

5. Flexbox zombies

Flexbox zombies CSS game

This game is super well set up in graphics! I am blown away by how cool the storyline is.

It has 12 chapters, with each up to 25 levels. It usually costs money to play this one, but it seems free forever.

6. Grid garden

Grid Garden CSS Game

Grid garden is a super fun way to learn CSS Grid. You have to use grid layouts to ensure all the carrots get water.

It has 28 levels to practice a lot of CSS grid options!

7. Grid attack

Grid attack CSS Game

This game is by the same creator as Flexbox adventure and super well-executed like the other game!

You have to use CSS Grid to change the land so the demons will not survive.

It comes with 80 levels, which gives you many options and time to learn CSS grid in a super fun way.

8. CSS Diner

CSS Dinner CSS Game

This game is actually really interesting! It’s a game to learn about CSS selectors and some modern ones.

The game has 32 levels and entertaining animations to showcase what selector you should target.

9. Guess CSS

Guess CSS Game

This game is very similar to CSS Diner, but you have to guess which selector matches the result you see.

This is an excellent concept as you always get to see the perfect result.

It’s also not limited to specific CSS parts and includes many different ones.

10. CSS Speedrun

CSS Speedrun

In this game, you have to write specific CSS Selectors to target5 the highlighted elements.

However, you have to do it as quickly as possible, making this a great challenge for those who like an extra level of hardness to their games.

The game comes with ten levels, but you can play more often and improve your speed.

Bonus

Once you’ve mastered these games, you can enter some CSS challenges and battles to showcase all you learned.

Some great website for that are:

All these websites have a particular example you have to recreate most efficiently most of the time.

There are some excellent communities around these websites, and you’ll have fun solving them.

Let me know what your favorite CSS game is 🙌.

4 Exciting New CSS Features in 2022

Updated on by

Foreword

CSS has changed rapidly in recent years, but I think 2021 is a booming year for CSS with many new features.

Such as CSS container query, CSS parent selector, CSS cascade control rules, CSS grid, etc. And all major browser manufacturers are excited about this feature.

It is a boon to our developers, let us thank them for their hard work!

Let’s take a look at what’s new in CSS in 2022.

1. CSS parent selector :has()

Safari 137 is currently the only browser that supports the :has() selector by default.

There are many selectors in CSS, but the :hasselector is special. The CSS :has()pseudo-class selector is somewhat similar to :not(), also known as a structural pseudo-class selector, and is also used in CSS functions. Call it a dynamic pseudo-class function. It allows you to match elements more finely.

The :has()pseudo-class would represent an element if any selector passed as an argument matches at least one element!

Simply put, elements are only selected if the selector is passed to :has()match at least one element. This seems a bit confusing to understand. Let’s look at a simple example:

In the above example, all <img />elements in the <figure>element is selected; while the figure:has(figcaption) img selector indicates that the <figure> the element containing the <ficaption>element is selected All <img /> elements in. Note that here :has()passes a figcaption selector as its parameter.

Here’s what you’ll see in a supported browser:

2. Next CSS Transform

This is similar to CSS media queries. It is not a new feature of CSS. In the CSS Transform Level 2 specification, the “rotate() , scale() , translate()” functions that previously used the transform property were turned into independent CSS properties. And they have all become experimental properties of mainstream browsers that can be experienced in the browser.

The translate, rotate, and scale properties allow developers to specify simple transformations independently, in a manner consistent with typical user interface usage, without having to remember the order in the transformations, making transform(), The actions of rotate() and scale() remain independent and work in screen coordinates. The order in which they are applied is first translation, then rotation, scaling, not the order in which you define them. Having independent transform properties also means we can animate and transition them separately.

3. CSS @container

The CSS Container Query feature is definitely a long-awaited feature, and it’s going full speed ahead in 2022!

Una Kravets shared the container query @container at Google I/O; She calls @container one of the features required by the new responsive layouts.

CSS @container looks similar to @media, but it is more powerful than the media.

View an online example:https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjf4jf&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjf4jf&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjf4jf%2Fscreenshot.png&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=codesandbox

4. CSS Subgrid of Grid

As far as web layouts are concerned, although Flexbox is great, it still has a lot of limitations in two-dimensional layouts. In the entire technical system of Web layout, only CSS Grid is the only two-dimensional layout. Nevertheless, CSS Grid layouts have been moving forward and have been supported by major browsers.

CSS Grid has been around for many years, and many of the features in this module are supported in major browsers, but in the CSS grid layout system, there should be a subgrid, subgrid.

The earliest definition of subgrids like grid and inline-grid is just a display property value.

div {
display: subgrid;
}

But it was removed later, but we can simulate subgrids by nesting grids.

div {
display: subgrid;
grid-template-columns: repeat(4, 1fr);
}

The problem is that it is difficult to align the nested grid items with the parent grid. In other words, the parent grid and the nested grid are two separate grids with their separate grid parameters. Therefore, to allow the subgrid to continue the relevant parameters of the parent grid, the subgrid is introduced into the CSS Grid system again. Still, the subgrid is no longer the value of display, but the grid template columns or grid- The value of the template-rows property.

Conclusion

Some of the new CSS features listed above, which specific new features will appear in browsers in mid-2022, are not yet known. But, on the other hand, some of the features mentioned above are already available in one or more browsers. So, if you are interested, you can try it yourself.

Let us once again thank those who have quietly contributed to the development of CSS!


you can find original article by Richard Lee here

wordpress-site-migration

How To Migrate A WordPress Site From One Host To Another

Updated on by

Migrating a WordPress site from one hosting provider to another can be stressful! Use this step-by-step guide to make it seamless.

Thinking of changing hosts but not sure how to migrate a WordPress site from one host to another?

They say that moving house, getting married, and changing jobs are the three most stressful things in life… but I would argue that there’s another strong contender for the top three.

Migrating your WordPress website from one host to another!

Well, I have some good news and some bad news.

The bad news first… migrating a website to a new host will always make your heart race and your palms sweat, no matter how many times you’ve done it.

Good news: Migrating a WordPress site to a new host is essentially a series of steps that you can repeat each and every time.

It’s practically the same for every website you migrate.

This step-by-step guide to seamlessly migrate your WordPress website will make the entire process a little less stressful.

3 Options For Migrating Your WordPress Site To A New Host

There are three main options for migrating a WordPress website from one hosting provider to a new hosting provider.

  • Get your host to do it for you.
  • Use a WordPress migration plugin.
  • Go old school and use SFTP/FTP.

The best option for you will depend on your current hosting provider and new hosting provider and the size of the WordPress site you want to migrate.

1. Get Your Host To Do WordPress Site Migration For You

The first option for migrating a WordPress site is by far the easiest (and least stressful!) but whether this is an option will depend on which hosting provider you are migrating to.

Many managed WordPress hosting providers, such as Flywheel or SiteGround, will either do a free migration or will provide a plugin to install on your site to perform the migration (more on that in a moment).

Flywheel offers either a DIY plugin for you to complete the migration or they will do the migration for free.

All you have to do is fill out a brief form on their website with the current hosting details and ask them to conduct the migration.

This can take one – to three days but will save you so much time (and stress).

2. Move To A New Host Using A WordPress Migration Plugin

As I mentioned above, if your fully managed host will not do the migration for you, they will usually provide a plugin that you can install on your site to perform the migration.

Using this migration plugin is easy.

These plugins typically work as an installation wizard to guide you seamlessly through the process of moving the WordPress files and database from one location to another.

They also automatically install WordPress on the new site in preparation for the files and database to be uploaded.

If you are not using a fully managed host, there is another plugin option.

Enter the All-In-One WP Migration plugin.

To migrate a WordPress site using this plugin, follow these steps:

Step 1: Log in to the backend of the WordPress site that you want to migrate.

Step 2: From the WordPress dashboard, navigate to plugins and click on Install New.

Step 3: Search for All-In-One WP Migration and install the All-In-One WP Migration plugin by ServMask.

Use the All-in-One WP Migration plugin

Step 4: Activate the plugin.

Step 5: Repeat steps one to four on the new WordPress site (the one you want to migrate to) so you have the plugin installed on both the new and old site.

Step 6: Install the plugin Regenerate Thumbnails by Alex Mills (Viper007Bond) to the site you’re wanting to migrate to.

Step 7: Update ALL plugins, themes & WordPress core files on BOTH the new site and the old site (Note: the WordPress version must be the same on both sites).

Step 8: Create an export file using the “All-in-One WP Migration” plugin

Step 9: Optional: Add a rule to “Find” your new site database prefix and “Replace” with your old site database prefix (only if necessary)

Step 10: Export to File and download the file to your computer.

Step 11: On the new site, open the ‘‘All-in-One Migration’ plugin and import the file from the previous step.

Step 12: Once the file uploads, apply the uploaded export file to the new site when prompted.

Step 13: Go to Setting > Permalinks and save multiple times.

Step 14: Check all your plugins and make sure they’re activated.

Step 15: Check the media library. If the images aren’t there, use the Regenerate Thumbnails plugin to re-activate them if necessary.

Step 16: Check all pages/posts/etc. to make sure everything looks as it should. Then you can refresh your newly migrated WordPress site to see how everything looks.

Step 17: Install the Better Search Replace plugin by Delicious Brains on the new site.

Better Search Replace plugin

Step 18: In the WordPress dashboard, go to Tools > Better Search Replace.

Step 19: Add your old site URL (i.e. oldwebsite.com) to the “Search for” field.

Step 20: Add your new site URL (i.e. newwebsite.com) to the “Replace with” field.

Step 21: Run a dry run. If you’re happy with the dry run, run the plugin for real.

Step 22: Go through theme files (primarily style.css, but maybe PHP files) to make sure all instances of “oldwebsite.com” are replaced with “newwebsite.com.”

Step 23: Check your new site. If the changes haven’t taken effect, clear your browser cache. If the changes still haven’t taken effect, clear your server cache.

The All-In-One WP Migration plugin has a limit on the size of the site that it can migrate (128MB).

If you have a very large site, these alternative plugins may help you migrate your WordPress site from one host to another:

Be sure to read all of the instructions for the plugin that you choose, to make sure that it is appropriate for the type of migration you want to do.

3. Old School WordPress Site Migration With SFTP/FTP

For many migrations, using a plugin should work fine.

However, for more complex migrations, you may need to manually migrate your WordPress site.

This can be done using either the File Manager in the cPanel of your hosting provider or by using an FTP or SFTP connection.

To use an SFTP/FTP client such as Filezilla or Cyberduck, you should consult with your hosting provider(s) for the correct configuration of this connection, but you typically need the username and password for your hosting account, the FTP or SFTP address, and the correct port number.

Once you have this information, follow these steps:

Step 1: Using File Manager in the cPanel or the SFTP/FTP connect, navigate to the root folder (public_html is the usual location) of the site you are migrating to. If you aren’t sure where the root folder is, you may want to contact your hosting provider, as it may be in a folder by a different name for security reasons.

Step 2: If you’re using the File Manager located in the cPanel, select public_html and download it to your computer.

If you’re using the SFTP/FTP client, select the public_html folder and download it to your computer. To make it easier to migrate, you can create a zip file of the downloaded folder.

Step 3: You now need to download your WordPress databases. Log into phpMyAdmin on the hosting where the site is currently located.

Step 4: Export the database. (Note: You may need to reach out to your hosting provider to find out which database to use if you see more than one listed in phpMyAdmin).

Step 5: Select the database to export. Click Export and then Quick for the type of export, and SQL as the file type. Click Go.

phpMyAdmin export WordPress site migration

Step 6: If you are going to use phpMyAdmin to import the site, you can create a zip file once the database is downloaded to your computer. Alternatively, you can select compressed in phpMyAdmin to compress the database before it downloads.

Step 7: Make sure there is nothing installed on the site you are migrating to.

Step 8: Go to the new hosting provider and create a new empty database. In the cPanel, navigate to MySQL Databases and click on it, name the new database appropriately and click Create Database.

Step 9: Create a new user in the MySQL Users section. Create a username and password and select Create User. Note that all usernames and passwords you use to create the database and user. You will need to update those in the wp-config.php file.

Step 10: Add the user to the database by going to the Add User to Database, selecting the new user and the database, and clicking Add.

Step 11: You next need to edit the wp-config.php file from the WordPress files that you downloaded. Make sure, if you created a new database name “DB_NAME”, username “DB_USER, and/or password “DB_PASSWORD“, you will want to update them here and save the file.

wp-config screenshot

It is wise to first create a copy of the original wp-config.php and store it elsewhere on your computer.

This is a precaution in case something happens and you need the database information from the current site location.

Step 12: Log into the new site’s phpMyAdmin. Select the new empty database you just created. Import the SQL database that was exported from the current location, by selecting the new database in the left window, hit the Import tab, choose the file to import, and click Go.

Choose the database zip file you have exported and make sure it is ready to import as an SQL file and hit Start Import.

phpMyAdmin screen import

Step 13: Next, you will want to upload the WordPress files to the new installation. Log into the File Manager of the cPanel of the new site installation or connect to SFTP/FTP for the new site location. Upload the public_html folder to the new location.

Step 14: If you are migrating from a staging site, subdomain, or different domain name, install a plugin such as Better Search Replace on the migrated site in order to switch all of the old site URLs to the new domain name URLs.

Pointing Your Domain Name To The New Website

Once you have migrated your WordPress site to a new host, you will need to connect the new site to your domain name.

Update the new IP address in the DNS records or if you prefer to maintain the DNS records on your web hosting, you can update the nameserver on your domain hosting account.

Step 1: Log in to your domain hosting account. (I’m using Namecheap for this demonstration.)

Step 2: Select the domain you will use for the new site.

Step 3: Click Manage Domain and Advanced DNS.

Step 4: In the A Record, use @ for Host, and add the new IP address provided by the new web hosting provider under Value. TTL should be automatic.

Step 5: In the CNAME record, use www for Host, put your new domain name under Value, and Automatic for TTL.

Step 6: Save Changes.

DNS record changes screenshot

Follow the instructions from your specific domain hosting provider to make sure that all DNS records are present and updated to point to your new website location.

Allow 24 to 72 hours for complete internet propagation.

The Stress-Free Way To Migrate A WordPress Site

Migrating a WordPress website doesn’t have to be stressful.

If your host can’t do it for you, there are plugins that make the migration process stress-free.

In some rare instances, you might have to use SFTP/FTP to migrate a more complex site.

That being said, the steps are always similar when it comes to WordPress migration.

Allow plenty of time for the migration process.

With enough practice, you’ll be a pro at moving WordPress sites from one host to another!


You can find original article by Julia Taylor here

8 Essential CSS Tips and Tricks Every Developer Should Know

8 Essential CSS Tips and Tricks Every Developer Should Know

Updated on by

Are you using these key CSS methods for a rapid workflow and a beautiful web design?

Every developer should know these CSS tricks to develop their projects quickly and efficiently. They’re sure to increase your productivity to the next level—let’s get started.

1. Hover Effects

You can add a hover effect to an HTML element using the :hover selector.

Example: Adding hover effect to a button element.

HTML Code:

<button>Hover Over Me</button>

CSS Code:

button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

You can play around with this code and add effects like fade-in, grow-in, skew, and so on. Make it your own!

 

CSS Fade-in Effect on Hover
button{
opacity:0.5;
}
button:hover{
opacity:1;
}
CSS Grow-in Effect on Hover
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

2. Resize Images to Fit a div Container

You can resize an image to fit a div container using the height, width, and object-fit properties.

 

HTML Code:

<img class=”random-image” src=”https://picsum.photos/200/300″ />
CSS Code:

.random-image {
height: 100%;
width: 100%;
object-fit: contain;
}

3. Overriding all the Styles

You can override all other style declarations of an attribute (including inline styles) using the !important directive at the end of a value.

HTML Code:

<p class=”className” id=”idName” style=”background-color: orange;”>
Hello World!
</p>
CSS Code:

p {
background-color: yellow;
}
.className {
background-color: blue !important;
}
#idName {
background-color: green;
}
In this example, the !important rule overrides all other background-color declarations and ensures the background color will be set to blue rather than green.

 

4. Truncate Text With Ellipsis

You can truncate overflowing text with an ellipsis (…) using the text-overflow CSS property.

HTML Code:

<p class=”text”>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
</p>
CSS Code:

.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}

5. Using text-transform

You can force text to be uppercased, lowercased, or capitalized using the text-transform CSS property.

Uppercase

HTML Code:

<p class=”uppercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.uppercase {
text-transform: uppercase;
}

Lowercase

HTML Code:

<p class=”lowercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.lowercase {
text-transform: lowercase;
}
Capitalize
HTML Code:

<p class=”capitalize”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.capitalize {
text-transform: capitalize;
}

6. Using Single-Line Property Declaration

You can use the shorthand properties in CSS to make your code concise and easily readable.

For example, CSS background is a shorthand property that allows you to define the values of background-color, background-image, background-repeat, and background-position. Similarly, you can define properties for font, border, margin, and padding.

Single-Line Background Property Declaration
background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;
You can simplify the above declaration to a single line:

background: black url(images/xyz.png) no-repeat left top;
The shorthand properties are very convenient to use, but you need to consider some tricky edge cases (as outlined on MDN Web Docs) while using them.

 

7. Tooltips

Tooltips are a way to provide more information about an element when the user moves the mouse pointer over the element.

Right Tooltip
HTML Code:

<div class=”tooltip_div”>Right Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Left Tooltip
HTML Code:

<div class=”tooltip_div”>Left Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Top Tooltip
HTML Code:

<div class=”tooltip_div”>Top Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Bottom Tooltip
HTML Code:

<div class=”tooltip_div”>Bottom Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
You can also use the Bootstrap library to create custom Bootstrap tooltips.

 

8. Add Shadow Effects

You can add CSS shadow effects to texts and elements using the text-shadow and the box-shadow CSS properties respectively.

CSS Text Shadow
The text-shadow CSS property adds shadows and layers to the text. The text-shadow property accepts a comma-separated list of shadows to be applied to the text.

Syntax of the text-shadow CSS Property:

/* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;
Note: The color and blur-radius arguments are optional.

For example:

background: #e74c3c;
color: #fff;
font-family: lato;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);
CSS Box Shadow
The box-shadow property is used to apply a shadow to HTML elements.

Syntax of the box-shadow CSS property

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Note: The blur, spread, and color parameters are optional.

For example:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
If you want to have a look at the complete source code used in this article, here’s the GitHub repository.

Style Your Website Using Modern CSS Tricks
Adding CSS text shadows to a website is a great way to draw the attention of the users. It can give the website a certain elegance and a unique feel. Get creative and experiment with some text-shadow examples that may align with the theme of your website.

 

Original article by Yuvraj Chandra can be found here