CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Miscellaneous CSS tips for Web Studio

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

CSS image replacement

REPLACE HEADING TEXT WITH AN IMAGE
As suggested on the SEO basics page the H1 heading is important, but what if you want an image instead of text?
This is a way to use an image to replace Heading tags and still have search engines read the text.
Typically you would do this to use a logo for an H1 but you could use H2 to H6 headings as well

Below is the example of the <H1> replaced with an image

Web Studio Next

You can use a .gif .jpg or a .png image. For the example I made an Image that matches the background color.
Put an "HTML Object" on your page and make it look like the image as shown on the add images page.

Name your image 1.gif and attach it to "website properties"

DOUBLE CLICK on the "HTML object" copy/paste this.

<h1 class="textreplace">
<span></span>Your H1 Heading Text
</h1>

<style type="text/css">
h1.textreplace {position:relative;
width:100%; height:100%; margin:0; overflow:hidden;}
h1.textreplace span {position:absolute;
width:100%;height:100%;
background: url(1.gif);}
</style>

On the HTML tab in "Insert Page HTML"
copy/paste this "Inside HEAD"

1.gif is the name of the image you attached
You can use h2 to h6 replace the h1 in both codes

Image with border-radius

BORDER RADIUS
Border-radius is a css3 code that makes borders with rounded corners.
IE browsers up to 8 will only see a square corner all normal browser use it.

Put your image on the page like you always do you can apply it to as many images as you like

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Object" and copy/paste this

class="roundcorner"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.roundcorner{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding:2px;
border:1px solid gold;}
</style>

Radius 10px is the size of the rounded corners
2px is the space between the image and the border
1px is the size and gold the color of the border

P-38

Enlarge image on Hover inside border

TRANSITIONS
This works in all browsers but it looks best in up to date ones with a transition effect.
Transition is the css3 effect built into new browsers that "ease" or slow the change down.
So this enlarges fast in IE browsers until 10 and slower with a transition effect in the rest.

Put your image on the page like you always do you can apply it to as many images as you like

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Division" and copy/paste this

class="growpicINSIDE"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.growpicINSIDE {overflow: hidden;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
border: 6px solid white; }
.growpicINSIDE img {
height: 100%; width: 100%;
-webkit-transition: all 1s ease;
transition: all 1s ease;}
.growpicINSIDE img:hover {
width: 120%; height: 120%;}
</style>

You can change the shadow color black
the border size 6px and color white
The size the image enlarges by with both 120%
keep those the same percentage.

Enlarge image on Hover

This works in all browsers but like the above uses a "transition"
So this enlarges fast in IE browsers until 10 and slower with a transition effect in the rest.

F4U

Image tilt on Hover

bf109

Put your image on the page like you always do you can apply it to as many images as you like

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Division" and copy/paste this

class="growpic"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.growpic img {
-webkit-transition: all 1s ease;
transition: all 1s ease;
border: 6px solid white;
height: 60%; width: 60%;}
.growpic img:hover {
width: 100%;height: 100%;}
</style>

You can change the border size 6px and color white
The size the image is made smaller with both 60% keep those the same percentage.
You will see the smaller image when you preview

TRANSFORMS
This uses a transition and a transform effect this one is 2D, there are 3D ones too.
Transform is the css3 effect built into new browsers that allows you to change the position.
Tranform works in IE9, transition in IE10 and both in all the normal browsers.

Put your image on the page like you always do you can apply it to as many images as you like

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Division" and copy/paste this

class="tiltpic"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.tiltpic { webkit-transition: all 0.5s ease; transition: all 0.5s ease;
border: 6px solid white;}
.tiltpic:hover {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);}
</style>

You can change the border size 6px and color white
The amount the image is rotated is with -10deg in the 3 places.
If you wanted it to rotate right you would use 20deg for example

You need to preview this one in an up to date browser.
The old IE browsers can do this but filters are being phased out and for this they are a bit archaic so I didn't include them.

Image spin and round border on Hover

This uses all 3 transition transform and the border-radius.
When you put your mouse over the eagle you'll see why he's miffed.
Tranform and border-radius work in IE9, transition in IE10 and all 3 in the normal browsers.

Put your image on the page like you always do you can apply it to as many images as you like

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Division" and copy/paste this

class="spinpicROUND"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.spinpicROUND { overflow: hidden;
border: 6px solid white;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;}
.spinpicROUND:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>

You can change the border size 6px and color white
The amount the border changes uses 50% this time
The amount the image is rotated is with 360deg in the 3 places.

You need to preview this one in an up to date browser.

Thank-you

CSS in Web Studio 5 - Miscellaneous CSS tips and tricks for web studio - by Web Studio Next

aaaaaaaaaaaaiii