css - CSS Code - CSS Examples

Fun With CSS Code Examples

Learning a new skill can be a great experience but it takes time and you have to stick with it.. Every now and then it is a great idea to sit back and have a bit of fun with the material. In this article, you will do just that with some fun CSS code examples.

Topics like how to make text bold or size an image have merits in design. As do many of the other topics covered in the Udacity CSS Content Hub. However, this post will deal with simple bits of fun you can have when learning to use HTML and CSS. 

With no goal in mind other than having a good time, get ready for some interesting CSS code examples to play around with.

As with any guide, you need a solid starting point to work from. The first step is to set up an HTML document and CSS Stylesheet.  If you need information on these items, please check out this article for help on the basics.

Here is a basic HTML document to start with. Feel free to use your own code as well.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fun With CSS Examples!</title>
       <link rel="stylesheet" href="CSSExamples.css">
    </head>
    <body>
      <h1>Let's try some fun CSS ideas!</h1>            
    </body>
</html>

Next, create a basic empty CSS Stylesheet to start working with. You may notice that in the HTML document above, the linked style sheet is titled “CSSExamples.css”. You can use whatever naming convention you like, but be sure that it is properly linked to the HTML document.

With the absolute basic groundwork out of the way, you can start to dive into some neat CSS code examples.

CSS Code Example: CSS Hover Effect

The CSS hover effect can be used for some really neat creative options. This styling takes effect when a user places the mouse cursor over a target HTML element. When the mouse is sitting “over” that element it is considered to be hovering over it. 

That’s the basics of what the effect is, but now you might want to know just how to apply it yourself. This part is pretty direct and easy. In the sample HTML code, there is a single heading number one tag located in the body.

  <body>
      <h1>Let's try some fun CSS ideas!</h1>            
    </body>

This heading tag will be the target of the CSS effect. Now that you know what the target is, it’s time to add the CSS styling. In the CSS code example below, you’ll see various properties and values applied.

h1:hover{
    border-style: double;
    border-color: blue;
    border-radius: 30px;
    font-weight: bolder;
    text-align: center;
    padding: 50px;
    text-transform: uppercase;
    background-image: linear-gradient(blue, red);
    color: aliceblue; 
}

These various styles will transform the heading element into something that looks quite different on the hover effect. As for the hover effect itself, you might notice it is not located between the curly braces with the other properties. 

The hover effect is instead noted directly after the HTML target element. In this case the h1 element as shown below:

h1:hover{}

With that code saved and in place, you can now fire up the HTML document in a browser to see the output from this code example.

With no interaction to the page, you should see the following sitting alone on the screen.

Now, take the mouse and move the cursor over the heading text and watch it transform into this.

You can also use the hover effect to add in an image as well. The sample HTML code has been altered to have new text in the heading.

  <body>
      <h1>Don't poke me with the mouse!</h1>            
  </body>

Now, inside the sample CSS code, you will have new properties setup. Take a look at them here.

h1:hover{
    background-image: url(LAngry.jpg);
    background-repeat: no-repeat;
    color: transparent;
    height: 400px;
    width: 400px;
}

First, notice that the hover tag is noted right after the target HTML element after the colon. Next, you can see that a background image has been set up to take effect when the hover effect is triggered. For display sake, the font was also made to become transparent so it would not get in the way of the image. Below you can see the effect in action.

That’s a pretty boring bit of HTML in action. However, if you dare to poke the text with the mouse as it warns against, you will see the image take over instead.

You can see that the little brick buddy up there is not pleased with your mouse actions. Perhaps be more mindful of the warnings next time?

CSS Code Example: Change Highlighted Text Color

A neat option to have on a website is the ability to change color. Did you know this can be done when a user highlights a text selection as well? If not, try out this sample code to see just how easy it can be to implement it. In the code below, you will see the familiar heading tag as the target of the style.

  <body>
      <h1>Highlight Me!</h1>            
  </body>

Next, head back to the sample CSS code to set up the styling. Take note of the selector at the start of the code.

h1::selection{
    background-color: red;
    color: black;
    }

Following the “h1” HTML element is a pair of colons with the word “selection” at the end. This action will tell the browser that when a user uses the mouse to highlight that section of text it should apply the provided styling. This selector does not accept much in terms of properties, but these two get the job done. 

When the user highlights the text, it should have a red background applied and change the font color to black. Here is the normal HTML output on the page.

With the user highlight in effect, this is how it should appear.

It is a simple effect but can be used with other elements to give a neat sense of style to a page. Just remember to consider how the color will look in contrast to the rest of the elements.

CSS Code Example: Drop Caps (The Cool Storybook Effect)

Last item on the neat CSS code tricks is the option to have drop caps in place. Drop caps are used for various reasons. However it simply provides a neat visual effect to text content. When you see a storybook and the first letter of the chapter is shown in bold large form, it lets you know that the ride is kicking off.

Creating this effect on the HTML page is as simple as a few lines of code in CSS. In the example HTML code below, you can see a heading tag is still there. A break tag and paragraph tag have also been added to the page as well. The paragraph tag will be the focus of the drop cap styling.

  <body>
      <h1>The Great CSS Story</h1>
      <hr>
      <p>See into the code and know that it sees you in return! 
          Tis the way of the coder to be lost within the lines.</p>            
  </body>

Moving to the CSS stylesheet, you can now see how the drop cap effect is applied.

p:first-letter{
    display:block;
    float:center;
    margin:3px;
    font-size:80px;
    color: blue;
}

The trick is the selector of “first-letter” noted after the colon of the paragraph tag. Quite directly this will tell the browser to target the style to the first letter in the paragraph. The styling you wish to apply depends on the layout of the page itself. If you’re interested in learning more about page layout, check out this article on flexbox and CSS grid.

In the sample HTML  code here, the page is rather barren so only minimal work was applied. However, you will find it does not take much more than this to achieve a working effect.

With no styling in action, the HTML page will provide the following output.

Now, with the CSS in effect, you will see the drop cap style come through.

Just like that, you have added a neat effect to the text content of the page. While it should not be overused, it does have some merit for use on sites. Even more so with websites geared for articles, blogs, or actual storytelling.  

Neat Tricks, What’s Next?

Having fun with CSS and HTML does not have to end here. Learning how to combine elements for styles can be a bit more complex but very rewarding. Take a look at how to do that with this article on CSS combinators

You can find that other avenues of design can take you to really interesting learning paths as well. Consider learning about the use of color theory and how it helps you design websites with artistic eyes. It really comes in hand when trying to use the multitude of options available in the CSS hex color library.

With any option you choose, make sure you are learning things you want to know. If you feel pressured or stuck on a concept, move to another for a while and come back to it. You don’t have to be perfect, just dedicated. Remember, keep having fun with the process.

_______________________________________________________________________

Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. If you are looking to advance your career,  take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.

Start Learning