90057859fdee5f33e166ab2dcdd1ab2e

10 Simple & Easy Ways To Create Beautiful Looking Web Pages With CSS

May 17, 2022 | CSS Tips, Design With Code | 0 comments

Huntsville web design

Photo by Negative Space and Pexels

These days, anyone with a bit of time and patience can learn to create amazing and beautifully styled websites and webpages using CSS. Whether you’re a budding developer, a dabbler, or perhaps just someone trying to add a professional touch to your website, CSS can be a useful, versatile, and creative tool.

With a vast number of styles and tricks to explore, there are fortunately many that are easy to learn. We’ve outlined six tips that will help you to create webpages that look and feel a lot more appealing and streamlined.

1.Custom Text Selection Color

You may have noticed that some of the more sophisticated websites have a custom color when highlighting text, rather than the standard bright blue highlight seen on most web pages. Though this might seem like a trivial detail, having a custom text selection color that matches the overall color scheme of your webpage can add that extra dash of class and polish.

This can be easily done using the “selection” pseudo-element in your stylesheet.

Example:

::selection {

background-color: #6f6f6f;

color: #e4e4e4;}

2. Drop Caps For Articles

Want to give your articles and publications a professional look with that large initial capital letter, called the “drop cap”, at the beginning of the first paragraph? The following is a simple and easy method without having to use a span and .dropcap class name.

To create the drop cap with CSS, use the “first-letter” pseudo-element with the “first-of-type” selector to customize the first letter of your first paragraph.

Example:

article p:first-of-type::first-letter {

color: #6f6f6f;

float: left;

font-family: Times New Roman;

font-size: 4rem

line-height: 4vw;

padding-right: 8px;}

3. Smooth Scrolling To Sections

Another way to really add a touch of class to your webpage is by adding a smooth scrolling effect for jumping to different sections of webpage when clicking on a section link. This will replace the standard, somewhat jarring effect of the webpage section instantly popping into view.

To do this, use the CSS “scroll-behavior” property with “HTML” as a selector, which will enable it to function throughout the HTML page.

Example:

html {

scroll-behavior: smooth ¡important;

}

4. Customize Your Input Box

An input box, whatever its use may be on your webpage, is generally an important feature, and it’s almost as important for it to look good as it is to be functional.

The following is an example of an elegantly styled input box. It includes the “caret-color” property, which controls the color of the temporary wording displayed in an input box, called the “caret”. Another small detail that can add to the appeal of your landing or contact page, or your website as a whole.

Example:

.form__input {

width: 80%;

height: 4vw;

outline: 0;

border: 0;

border-radius: 4vw;

background-color: #e4e4e4;

box-shadow: inset 4px 4px 6px #727272, inset –6px –6px 6px #6f6f6f;

padding: 0 0 0 1vw;

font: 400 1vw “Futura”, sans-serif;

color: #222222;

caret-color: #c4c4c4;

}

5. Drop-shadows For Logos & Transparent Images

The drop-shadow effect of the CSS “filter” property for image wrappers provides a great way to give images a neat looking custom drop-shadow effect. This can look particularly great for making logos and images with transparent backgrounds stand out on the page.

Example:

.img-wrapper img {

width: 100%;

height: 100%;

object-fit: cover;

filter: drop-shadow(30px 10px 4px #767676);

}

6. Easy Centering With Place-items Property

Centering a div element in a webpage is made very simple and easy using just a few lines of CSS. This method uses the “display:grid” element to lock the element onto the underlying grid structure of the webpage. It then uses the “place-items” property to center it.

Example:

main {

width: 100%;

height: 80hv;

display: grid;

place-items: center center;

}

Note: The place-items property also has other useful positional values such as “center stretch”, “center start”, and various others.

7. Custom CSS Scrollbar

Usually, to ensure full support across browsers, JavaScript libraries are the go-to if you want to customize the look of the scrollbar. The following is an example of how it can also be done using the “content-wrapper” element container and webkits in CSS.

Example:

.content-wrapper {

width: 800px;

height: 400px;

overflow: auto;

}

.content-wrapper::-webkit-scrollbar {

width: 12px;

background-color: # c4c4c4;

border-radius: 1vw 1vw 1vw 1vw;

}

.content-wrapper::-webkit-scrollbar-thumb {

background-color: #9a9a9a;

border-radius: 1vw 1vw 1vw 1vw;

}

.content-wrapper::-webkit-scrollbar-thumb:hover {

background-color: #767676;

}

.content-wrapper::-webkit-scrollbar-thumb:active {

background-color: #656565;

}

8. Disabling Selection With CSS

Sometimes the need arises on a webpage for users not to have the ability to select a particular header or element. If you don’t want text copied or pasted, this is the ideal option. Using the “user-select:none” property you can ensure that headers, body text and even images cannot simply get copied and pasted for use elsewhere.

Example:

.content-header h2 {

user-select:none;

}

9. Create A Sidebar With Vertical Text

Often it can be very useful to have a sidebar attached to a certain section of a webpage, and having vertical text inside adds to the appeal and overall UX. For a sidebar with vertical text running along it, the following method can be employed using the “writing-mode” and “transform” properties.

Example:

.sidebar h2 {

writing-mode: tb-rl;

transform: rotate(-180deg);

}

10. Using Blend Property for Blended Background Colors

To blend the pictures and colors within any div on a webpage with the color and pictures directly behind it, the “background-blend-mode” property is a highly versatile and useful design tool. Be sure to use this CSS with care as you don’t want to detract attention away from your foreground colors or reduce the impact of foreground text.

Example:

div {

width: 400px;

height: 400px;

background-repeat: no-repeat, repeat;

background-image: url(“image.gif”);

background-blend-mode: multiply;
}

Note: There is a whole list of other blend effects that can be used with the background-blend-mode property. This includes “lighten”, “darken”, “overlay”, and many more that are worth looking up and experimenting with.

Keep Creating With CSS

The key to creating a great looking professional website is to keep learning and experimenting. As your CSS skills improve you can update your webpages and increase the aesthetic appeal of your site. You’ll also improve the UX with every change you make.

Continue learning CSS tips and techniques such as these and you’ll quickly gain a valuable set of tools for high-quality, and visually stunning, web design.

Article contribution by: Carmen Docampo

IG Webs – Web Design, SEO Content Services, Website Management & More! Give Us a Call for A Free Quote Today!

We provide responsive websites, mobile websites and website management from start-ups to medium large businesses across the nation. At IG Webs, success means a website that presents the client’s business and ideas in an interesting and effective manner. Website DesignLocal Marketing, SEO Content Services, Website Management, E-Commerce and more! Call us today or use our free quote form – Allow us to quote you a price and get started on your project. You’ll be glad you did!

Your Online Business Success is Our Success!

Archives

BBB

IG Webs, Web Design, Brownsboro, AL

the good state

2021 Award

You May Also Like …

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

0 Comments

Submit a Comment