Things About Web Design Logo

Things About Web Design

PHP CSS MySQL JS Scripts & Tutorials

CSS Snippets


.

CSS Position Absolute Alerts

The CSS and <?php> include code below uses position: absolute.
to place an "Alert Box" on every page.
Just change one file in a folder ("includes/" for example).
Can be used for images or anything!
Create "greet files" Style goes in head. PHP goes wherever.

"Alert Box 1"
"Alert Box 2"
"Alert Box 3"

3

<style> .greet1 { position: absolute; top: 100px; left: 100px; width: 150px; border: 1px solid #73AD21; background-color: LightPink; color: Crimson; .greet2 { position: absolute; top: 150px; left: 100px; width: 150px; border: 1px solid #73AD21; background-color: Khaki; color: Sienna; } .greet3 { position: absolute; top: 200px; left: 100px; width: 150px; border: 1px solid #73AD21; background-color: PaleGreen; color: Green; } @media screen and (max-width:1000px) { .greet1, .greet2, .greet3 img { display: none; } } </style> <!-- Shout Box --> <div class="greet1"><?php include "includes/greet1.php";?> </div> <div class="greet2"><?php include "includes/greet2.php";?> </div> <div class="greet3"><?php include "includes/greet3.php";?> </div>
.

CSS Using Images As Bullets

CSS below is unordered list using images:

2

/*Unordered List with Images*/ li { margin: 0; padding: 12px 0 12px 64px; list-style: none; background-image: url("/code/images/wd.png"); background-repeat: no-repeat; background-position: left center; background-size: 50px; }
.

CSS Change Cursor Highlight Color

Very Cool 😎 CSS code below to change color of highlighting as cursor moves on text:

1

/*change color of text highlight*/ ::-moz-selection { color: #ebf8f1; background: #2cba6c; } ::selection { color: #ebf8f1; background: #2cba6c; }