04-22-2010, 07:45 AM
Hey guys, how are you today?
I compiled a small list of CSS, Javascript, PHP and even HTML tips & tricks.
I didn't spend that much time on this, so it may not be the best tutorial -- written by me.
Anyway, right to the point.
I'll be dividing the tutorial into 5 parts:
Small and simple but useful Link Rollover trick (this might also be known as CSS Sprite):
Neon shadow (the one used on thenopslide.com):
Rounded Borders (although there are many similar to this, I just like using the simple version):
Input buttons background:
That's it for CSS.
Automatic Copyright Year:
Require_once: (Wasn't sure if I should post this since it's not exactly a trick, but I do find it useful)
settings.php:
index.php:
Ternary Operator:
Normal PHP:
Ternary:
PHPInfo:
Image instead of bullets:
Marquee:
Text around image:
Edit page using Javascript:
Enter the following in the address bar:
Javascript calculator:
Enter the following in the address bar:
Custom 404 error page:
Custom default index page:
Automatic www.:
Redirect:
And there you go, that'll be all for now. I may make a part 2 later.
You may find these codes somewhere else, but that's just because most of them are common.
I compiled a small list of CSS, Javascript, PHP and even HTML tips & tricks.
I didn't spend that much time on this, so it may not be the best tutorial -- written by me.
Anyway, right to the point.
I'll be dividing the tutorial into 5 parts:
I.CSS
II.PHP
III.HTML
IV.Javascript
V.HtAccess
II.PHP
III.HTML
IV.Javascript
V.HtAccess
I.CSS
Small and simple but useful Link Rollover trick (this might also be known as CSS Sprite):
Code:
/* The following will display part of an image and then display another part if you hover over it. */
a {
display: block; /* This sets a line break before and after the image */
background: url(imagelinkhere) no-repeat; /* Chooses the image, please change imagelinkhere to your images location */
height: heighthere; /* Sets height */
width: widthhere; /* Sets width */
text-indent: -9000px; /* Makes the link invisible to visitors */
}
a:hover {
background-position: 0 -25px; /* Sets starting point for the image */
}Neon shadow (the one used on thenopslide.com):
Code:
h1 {
text-shadow: 0 0 0.2em #cb1b1b, 0 0 0.2em #cb1b1b,
0 0 0.2em #cb1b1b; /* Sets a neon shadow for anything in the <h1> tags. Be sure to change #cb1b1b (Red) to anything you wish. */
}Rounded Borders (although there are many similar to this, I just like using the simple version):
Code:
#roundedborder {
border-top: 1px solid #444; /* Sets a 1px solid border with a grayish color to the top */
border-bottom: 1px solid #444; /* Sets a 1px solid border with a grayish color to the bottom */
border-right: 1px solid #444; /* Sets a 1px solid border with a grayish color to the right */
border-left: 1px solid #444; /* Sets a 1px solid border with a grayish color to the left */
border-radius: 15px; /* Sets the border radius to 15px, this is what makes your borders rounded */
}Input buttons background:
Code:
input {
background-color: #ff0000; /* Sets the background color for the input to red */
color: #ffffff; /* Sets the input text color to white */
font-weight: bold; /* Makes the text bold */
font-size: 10pt; /* Changes text size to 10 points */
}That's it for CSS.
II.PHP
Automatic Copyright Year:
PHP Code:
2009-<?php echo date("Y") ?>Require_once: (Wasn't sure if I should post this since it's not exactly a trick, but I do find it useful)
settings.php:
PHP Code:
<?php
$stuff = "a Playstation, an Xbox, and 3 notebooks."; // Creates $stuff and sets it to a Playstation...
?>index.php:
PHP Code:
<?php
require_once('settings.php'); // This is where the magic happens, we'll require_once settings.php, and here's what happens:
echo "I own $stuff"; // Here we echo $stuff from settings.php
?>Ternary Operator:
Normal PHP:
PHP Code:
if (isset($_POST['ternary'])) // If ternary is set
{
$ternary = $_POST['ternary']; // It will set $ternary to the value set above
}
else
{
$ternary = "TNS"; // And if not, it will set it to TNS
}
Ternary:
PHP Code:
$ternary = (isset($_POST['ternary'])) ? $_POST['ternary'] : "worked"; // ? means if true, and : means else
PHPInfo:
PHP Code:
<?php phpinfo() // Displays PHP info and a bunch of other stuff ?>III.HTML
Image instead of bullets:
Code:
<dl>
<dd><img src=".." />Text</dd> <!-- Creates a bulleted list with '...' as the bullet. -->
</dl>Marquee:
Code:
<b> <!-- Sets text to bold -->
<font color="#FF0000" size="5"> <!-- Changes color to red and size to 5 -->
<marquee behavior=alternate direction=up scrolldelay=30 height=250 style="Text-align;filter:wave color:'#FF0000' scrollamount='5'"> <!-- Sets marquee -->
<center> <!-- Centers text -->
ndee
</center>
</marquee>
</font>
</b>Text around image:
Code:
<center>
<table border="0" width="85%" cellpadding="10" cellspacing="10" bgcolor="#222222"> <!-- Creates a table -->
<tr>
<td>
<font color="#ffffff">
Text on the left
</td>
<td align=center>
<img src="..." width=150 height=200>
</td>
<td>
<font color="#FFFFFF">
And here the text is on the right
</td>
</tr>
</table>
</center>IV.Javascript
Edit page using Javascript:
Enter the following in the address bar:
Code:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0Javascript calculator:
Enter the following in the address bar:
Code:
javascript: alert(5+5);V.HtAccess
Custom 404 error page:
Code:
ErrorDocument 404 /c404.htmlCustom default index page:
Code:
DirectoryIndex custom.htmlAutomatic www.:
Code:
RewriteEngine on
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^thenopslide.com tld$ [NC]
RewriteRule ^(.*)$ http://t.tld/$1 [R=301,L]Redirect:
Code:
RewriteEngine On
RewriteRule ^(.*)$ http://www.thenopslide.com/$1 [R=301,L]And there you go, that'll be all for now. I may make a part 2 later.
You may find these codes somewhere else, but that's just because most of them are common.
