Top of Page

A.J.H. Computer Services - Home Page A.J.H. Computer Services - Home Page

 AJH Sites  
Useful Files   Links to Good Sites
Other AJH Pages   Internet Tools

 CSS Tips Tips
As used on this website
All Variables in RED
This Page
JavaScript Tips Tips
Some used on this website
All Variables in RED
Click Here

 
You can download a "Zipped" file with the STYLE.CSS file Click Here (2kb)
 
1. To set the page Colour and and Background
body {
background-color: #EFEFEF;
background-image: url("images/bg.jpg");
}
 
2. To set the default for the Text
P { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}

DT { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}
 
3. To override the default text format, eg: (in the HTML file) <P class="left">
P.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

P.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

Better Looking Photos

.frame {
border: 1px solid #000;
border-radius: 20px;
padding: 3px;
}
Adding a Frame to Your Photos
<IMG class="frame" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr {
border: 2px solid transparent;
padding: 2px;
border-radius: 25px;
}
Adding a Radius (No border)
<IMG class="imgbr" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr2 {
border: 1px solid black;
padding: 0px;
border-radius: 15px;
}
Adding a Radius (with border)
<IMG class="imgbr2" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr3 {
border: 0px solid transparent;
padding: 0px;
border-radius: 8px;
}
Adding a Small Radius (No border)
<IMG class="imgbr3" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr4 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
}

.imgbr4:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding Radius & DIM Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr4" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr5 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding Radius & BIG Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr5" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr5a {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5a:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding Radius & SMALL Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr5a" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr6 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr6:hover {
transform: rotate(15deg);
opacity: 1;
z-index: 1;
}
Adding Radius & ROTATE Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr6" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr7 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr7:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding Radius & SPIN Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr7" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr8 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr8:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Radius & BLACK & WHITE Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr8" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr9 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Radius & Shake a Photo (with Mouse Over)
(You could also add link)

<IMG class="imgbr9" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.gallery {
display: inline-block;
border: 1px solid #0b610b;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
opacity: 1;
filter: alpha(opacity=100);
}

.gallery:hover {
box-shadow: 0 0 2px 3px rgba(256, 0, 0, 1);
opacity: 0.5;
filter: alpha(opacity=50);
}
Gallery Thumbnails (with Mouse Over)
(You could also add link)

<IMG class="gallery" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.big {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.big:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding a BIG Effect (with Mouse Over)
(You could also add link)

<IMG class="big" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.small {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.small:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding a SMALL Effect (with Mouse Over)
(You could also add link)

<IMG class="small" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.dim {
opacity: 1.0;
filter: alpha(opacity=100);
transition: 0.3s ease;
}

.dim:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding a DIM Effect (with Mouse Over)
(You could also add link)

<IMG class="dim" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.rotate {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.rotate:hover {
transform: rotate(-15deg);
opacity: 1;
z-index: 1;
}
Adding a ROTATE Effect (with Mouse Over)
(You could also add link)

<IMG class="rotate" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.spin {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.spin:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding a SPIN Effect (with Mouse Over)
(You could also add link)

<IMG class="spin" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.bw {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Adding a BLACK & WHITE Effect
(with Mouse Over)
(You could also add link)

<IMG class="bw" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.shake {
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Shake a Photo (with Mouse Over)
(You could also add link)

<IMG class="shake" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgl
{margin-right: 2%;
}

.imgr
{margin-left: 2%;
}
Adding a Margin to the Right or Left
<IMG class="imgl" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here

<IMG class="imgr" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here

Buttons

In the HTML file
<A class="button" HREF="xxxx.html">Button</A>
<A class="button1" HREF="xxxx.html">Button1</A>
<A class="button2" HREF="xxxx.html">Button2</A>
<A class="button3" HREF="xxxx.html">Button3</A>
<A class="button4" HREF="xxxx.html">Button4</A>
With the CSS file downloaded

Button

Button1

Button2

Button3

Button4

Scroll

.scroll {
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}
<div class="scroll">Test/Images</div>

Links

.link:link {color:#0000ff;text-decoration: none;}
.link:visited {color:#29088A;text-decoration: none;}
.link:hover {color:#ff0000;text-decoration: underline;}
.link:active {color:#ff0000;text-decoration: none;}

In the HTML file
<A class="link" HREF="xxxx.html"><B>New Link</B></A>

New Link

Visited Link

 
You can download a "Zipped" file with the STYLE.CSS file Click Here (2kb)
JavaScript Tips

These website files are given here "as is" basis. A.J.H. Computer Services makes no representations or warranties of any kind, express or implied, as to the operation of the sites. The information, content, materials or products, included with these files. To the full extent permissible by applicable law, A.J.H. Computer Services disclaims all warranties, express or implied, including but not limited to, implied warranties of merchantability and fitness for a particular purpose. A.J.H. Computer Services will not be liable for any damages of any kind arising from the use of these files, including but not limited to direct, indirect, incidental punitive and consequential damages.

Top of Page


A.J.H. Computer Services - Home Page
Contact Me
© A.J.H. Computer Services