htaccess - Hide .php extension with url rewriting
create a htaccess file in the root folder of your web directory. And have to put the following codes as your requirement.
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.*)\.htm$ $1.php [nc]
Example
test.php to test.htm
http://localhost/test.htm
URL rewrite
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^product-([0-9]+)\.html$ products.php?id=$1
example
rewrite the product.php?id=5 to porduct-5.html
http://localhost/product-5.html
calls product.php?id=5
article
Tuesday, November 16, 2010
Saturday, November 6, 2010
CSS3 Search Form
CSS3 Search Form
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
<form class="searchform">
</form>
Friday, September 3, 2010
Extracting Named Parameters in CakePHP
Extracting Named Parameters in CakePHP
In real php you would have collected the GET Parameters from a URL like this www.example.com/test.php?id=1 using the $_GET variable in this fashion $get_variable = $_GET['id']; You can also do the same in CakePHP. In CakePHP if you are passing parameters in the URL, then the URL would appear like this (also they are named) http://www.example.com/test/view/id:1 the controller like this
function view(id=null){
$get_variable = $this->params['named']['id'];
}
In real php you would have collected the GET Parameters from a URL like this www.example.com/test.php?id=1 using the $_GET variable in this fashion $get_variable = $_GET['id']; You can also do the same in CakePHP. In CakePHP if you are passing parameters in the URL, then the URL would appear like this (also they are named) http://www.example.com/test/view/id:1 the controller like this
function view(id=null){
$get_variable = $this->params['named']['id'];
}
or
http://www.example.com/test/view/1/submit:yes
function view($id=null, $submit=null){
$get_variable_submit = $this->params['named']['submit'];
}
http://www.example.com/test/view/1/submit:yes
function view($id=null, $submit=null){
$get_variable_submit = $this->params['named']['submit'];
}
Thursday, July 15, 2010
php - Upload image from url
php - Upload image from url
<?
error_reporting(E_ALL);
// define the filename extensions
define('ALLOWED_FILENAMES', 'jpg|jpeg|gif|png');
// define a directory
define('IMAGE_DIR', 'image');
// check against a regexp for an actual http url and for a valid filename,
$url = "http://www.philwebcreative.com/philweb_logo.jpg";
if(!preg_match('#^http://.*([^/]+\.('.ALLOWED_FILENAMES.'))$#', $url, $m)) {
die('Invalid url given');
}
// try getting the image
if(!$img = file_get_contents($url)) {
die('Getting that file failed');
}
// try writing the file with the original filename
if(!$f = fopen(IMAGE_DIR.'/'.$m[1], 'w')) {
die('Opening file for writing failed');
}
if (fwrite($f, $img) === FALSE) {
die('Could not write to the file');
}
fclose($f);
?>
Wednesday, July 14, 2010
Resize images on the fly
Resize images on the fly
Follow these steps:
1. Get the script and save it on your computer
Once done, you can display images like this:
Demo
http://creativedesign-mind.com/r-ednalan/demo/resize_onthefily.php
Follow these steps:
1. Get the script and save it on your computer
Once done, you can display images like this:
<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />
Demo
http://creativedesign-mind.com/r-ednalan/demo/resize_onthefily.php
Saturday, July 10, 2010
Integrate WordPress Blog into CakePHP Application
Integrate WordPress Blog into CakePHP Application
RewriteEngine on
INSTALL WORDPRESS IN CAKEPHP
1. Install wordpress under the webroot
==app\webroot\blog
2. added htacess in the root
==htaccess file in main CakePHP folder(root).
RedirectMatch temp ^/blog/wp-admin$ http://www.example.com/blog/wp-admin/
RewriteRule blog$ /blog/ [L] RewriteRule blog/wp-admin$ /blog/wp-admin/ [L]
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
3. login wordpress admin
4. set up the the permalinks under Setting category menu then permalink
6. choose Custom Structure then enter this value
/%postname%/
7. above is the url blog
www.example.com/blog/Top-Firefox-Plugins-for-Web-Development
Friday, June 25, 2010
Shorter SQL statements by abbreviating table prefixes
Shorter SQL statements by abbreviating table prefixes
Instead of writing:
SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21
You can write:
SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21
Instead of writing:
SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21
You can write:
SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21
Thursday, June 24, 2010
Programming Language For Web Development (video from youtube)
Programming Language For Web Development video (video from youtube)
A good conceptual video about what a programming language is and what you need to know in terms of a web developer.
Wednesday, June 23, 2010
Animate a Contact Us Slide-Out Area using jQuery
Animate a Contact Us Slide-Out Area using jQuery
Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked. All with the help of our little friend, jQuery.
If you want to know more and download the source follow the link below
http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/
Demo
http://inspectelement.com/demos/jquerycontactus/
Download
http://inspectelement.com/demos/jquerycontactus/jquerycontact.zip
Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked. All with the help of our little friend, jQuery.
If you want to know more and download the source follow the link below
http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/
Demo
http://inspectelement.com/demos/jquerycontactus/
Download
http://inspectelement.com/demos/jquerycontactus/jquerycontact.zip
Animated Call to Action Button - Animate Button
Animated Call to Action Button - Animate Button
In this tutorial, you’ll find a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.
If you want to know more and download the source follow the link below
http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/
Demo
http://sixrevisions.com/demo/call-to-action-button/demo.html
Download
http://dl.dropbox.com/u/3293191/JQUERY/animate_button.zip
In this tutorial, you’ll find a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.
If you want to know more and download the source follow the link below
http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/
Demo
http://sixrevisions.com/demo/call-to-action-button/demo.html
Download
http://dl.dropbox.com/u/3293191/JQUERY/animate_button.zip
Scriptaculous ProtoFlow - Prototype
Scriptaculous ProtoFlow - Prototype
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!
If you want to know more and download the source follow the link below
http://www.deensoft.com/lab/protoflow/
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!
If you want to know more and download the source follow the link below
http://www.deensoft.com/lab/protoflow/
Prototype Prototip
Prototype Prototip
Style: Easy to customize.
Position: Complete control over tooltip positions.
Round: Configurable rounded corners, no PNG images required.
Speech bubble effect!
Works on all modern browsers.
If you want to know more and download the source follow the link below
http://www.nickstakenburg.com/projects/prototip2/
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.
Style: Easy to customize.
Position: Complete control over tooltip positions.
Round: Configurable rounded corners, no PNG images required.
Speech bubble effect!
Works on all modern browsers.
If you want to know more and download the source follow the link below
http://www.nickstakenburg.com/projects/prototip2/
Friday, June 18, 2010
Sum HTML Textbox Values using jQuery
Sum HTML Textbox Values using jQuery
If you want to know more and download the source follow the link
Demo
http://creativedesign-mind.com/r-ednalan/demo/sum-textbox-value-javascript.htm
If you want to know more and download the source follow the link
Demo
http://creativedesign-mind.com/r-ednalan/demo/sum-textbox-value-javascript.htm
Twitter-style alert with jQuery, CSS, and PHP
Twitter-style alert with jQuery, CSS, and PHP
If you want to know more and download the source follow the link
submit.php
Demo
http://creativedesign-mind.com/r-ednalan/demo/twitter_alert_style/
Download
http://dl.dropbox.com/u/3293191/JQUERY/twitter_alert_style.zip
If you want to know more and download the source follow the link
<style type="text/css">
body
{
background-color: #ccc;
color: #000;
padding: 30px;
}
#alert
{
overflow: hidden;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
height: 0;
color: #000;
font: 20px/40px arial, sans-serif;
opacity: .9;
}
</style>
<?php
if(!empty($_SESSION['display']))
{
echo '<div id="alert">' . $_SESSION['display'] . '</div>';
unset($_SESSION['display']);
}
?>
<form method="post" action="submit.php">
<label for="message">Message</label> <input type="text" name="message"> <input type="submit" value="Alert me!">
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $alert = $('#alert');
if($alert.length)
{
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 3000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200)
.click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});
</script>
submit.php
<?php
ini_set('session.save_handler', 'files');
session_start();
$themessage = get_magic_quotes_gpc() ?
stripslashes(trim($_POST['message'])) :
trim($_POST['message']);
$_SESSION['display'] = $themessage;
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>
Demo
http://creativedesign-mind.com/r-ednalan/demo/twitter_alert_style/
Download
http://dl.dropbox.com/u/3293191/JQUERY/twitter_alert_style.zip
Useful CSS Tips & Tricks
Useful CSS Stylesheet Tips & Tricks
1. Create an IE Specific Stylesheet
IE Only
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
IE 7 Only
<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
2. Background Image of Textbox
input#sometextbox {
background-image:url('back-image.gif');
background-repeat:no-repeat;
padding-left:20px;
}
3. Setting Minimum width for a page
specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
HTML
<body>
<div id="container">
CSS
#container {
min-width: 600px;
width:expression(document.body.clientWidth <>
4. Cross Browser Opacity
make an element transperant by setting the opacity level.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
5. Centering a Website
this technique to center the content.
HTML
CSS
#page-wrap {
width: 800px;
margin: 0 auto;
}
6. CSS Drop Caps
first letter will be a drop-cap.
p:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
7. CSS Text Shadow
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
Light Shadow
.shadow {
padding: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Pressed
.pressed {
color: #fff;
padding: 20px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
8. Using !important
By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.
.page { background-color:blue !important; background-color:red; }
9. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }
10. Perfect Page-Printing with CSS
@media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}
11. Auto Resize Large Images
12. Displaying PNG'S in IE
13.Round Corners without images
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.
border:2px solid;
border-radius:25px;
-webkit-border-radius:25px; /* Safari */
}
14.Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes
the code clearner and easier to understand.
Instead of creating CSS like this
It can be short-handed into the following:
15.Understanding Class And ID
These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.
Class vs. ID
Use a class tag if:
1. The style is used in various places throughout the document.
2. The style is very general.
Use an id tag if:
1. The style is only used once ever in the document.
2. The style is specific to a certain area of the document.
16.Remove outline for WebKit Browsers
When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).
If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):
input[type="text"]:focus {
outline: none;
}
17.Easy Web Fonts with Google Font API
<link href="http://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet" type="text/css">
h1 {
font-family: 'Cantarell', Arial, serif; /* Use a font stack, just in case. */
}
18.CSS3 Font Face
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
19. CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}
20. Opacity and Cross Browser Compatibility
Opacity is basically a way to make different HTML elements transparent
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
21. Rotating Text Using CSS
HTML:
Example of
rotated text
CSS:
.rotateit{
display:block;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
}
22. Understanding Box Model of CSS
Box Model is useful for new web developer and designers in order to know the actual height and width taking by the elements and to deal better with the cross browser compatibility issues
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
23. Import or Link CSS
two ways of linking stylesheets in the websites; HTML link tag and CSS @import.
Link
<link href="styles.css" type="text/css" />
@import
<style type="text/css">@import url("styles.css");</style>
24. Controlling Text Overflow in CSS
control this text fall outside the rendering area of the element box
<div style="position: absolute; left: 20px; top: 50px;
width: 120px; height: 50px; border: thin solid black;
overflow: hidden; text-overflow: ellipsis">
Contents overflow
</div>
25. Highlighting the Element that has Focus in a Form
input:focus { border: 1px dotted red;}
26. CSS Visibility or Display Property
visibility and display seems similar in terms of output
Visibility - When visibility is set to hidden, it carry the space but is not seen.
visibility:hidden;
Display - Display property is mostly use to hide the object by setting its value to none because it dose not carry space and other elements used to collapse in order to fill the space.
display:none;
27. Swapping Background Images When Hovered
swap the background image when mouse is over particular text , link or element
.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}
28. Set a Full Page Background Image
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
29. default Cursor with CSS
cursor: url(“image.cur”), default;
30. Double Boders Using CSS
.double {
border: 3px double #999;
}
31. Transform Text
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
32. Beveled box
img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}
32. Beveled box
#indented ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#indented ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
#indented ul li a:hover {background: #111;}
<div id="indented" class="box">
<ul>
<li><a href="#" target="_blank">r-ednalan</a></li>
</ul>
</div>
33. Fixed Footer Backgrounds
body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
width: 100%;
min-width:970px;
}
1. Create an IE Specific Stylesheet
IE Only
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
IE 7 Only
<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
2. Background Image of Textbox
input#sometextbox {
background-image:url('back-image.gif');
background-repeat:no-repeat;
padding-left:20px;
}
3. Setting Minimum width for a page
specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
HTML
<body>
<div id="container">
CSS
#container {
min-width: 600px;
width:expression(document.body.clientWidth <>
4. Cross Browser Opacity
make an element transperant by setting the opacity level.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
5. Centering a Website
this technique to center the content.
HTML
<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
CSS
#page-wrap {
width: 800px;
margin: 0 auto;
}
6. CSS Drop Caps
first letter will be a drop-cap.
p:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
7. CSS Text Shadow
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
Light Shadow
.shadow {
padding: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Pressed
.pressed {
color: #fff;
padding: 20px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
8. Using !important
By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.
.page { background-color:blue !important; background-color:red; }
9. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }
10. Perfect Page-Printing with CSS
@media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}
11. Auto Resize Large Images
<style type="text/css">
#post_view img { max-width: 146px; height: 112px; width: expression(this.width > 146 ? 146: true); }
</style>
<div id="post_view"></div>
12. Displaying PNG'S in IE
#png_bg {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}
13.Round Corners without images
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.
div {{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
border:2px solid;
border-radius:25px;
-webkit-border-radius:25px; /* Safari */
}
14.Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes
the code clearner and easier to understand.
Instead of creating CSS like this
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
It can be short-handed into the following:
.header {
background: #fff url(image.gif) no-repeat top left
}
15.Understanding Class And ID
These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.
Class vs. ID
Use a class tag if:
1. The style is used in various places throughout the document.
2. The style is very general.
Use an id tag if:
1. The style is only used once ever in the document.
2. The style is specific to a certain area of the document.
16.Remove outline for WebKit Browsers
When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).
If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):
input[type="text"]:focus {
outline: none;
}
17.Easy Web Fonts with Google Font API
<link href="http://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet" type="text/css">
h1 {
font-family: 'Cantarell', Arial, serif; /* Use a font stack, just in case. */
}
18.CSS3 Font Face
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
19. CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}
20. Opacity and Cross Browser Compatibility
Opacity is basically a way to make different HTML elements transparent
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
21. Rotating Text Using CSS
HTML:
Example of
rotated text
CSS:
.rotateit{
display:block;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
}
22. Understanding Box Model of CSS
Box Model is useful for new web developer and designers in order to know the actual height and width taking by the elements and to deal better with the cross browser compatibility issues
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
23. Import or Link CSS
two ways of linking stylesheets in the websites; HTML link tag and CSS @import.
Link
<link href="styles.css" type="text/css" />
@import
<style type="text/css">@import url("styles.css");</style>
24. Controlling Text Overflow in CSS
control this text fall outside the rendering area of the element box
<div style="position: absolute; left: 20px; top: 50px;
width: 120px; height: 50px; border: thin solid black;
overflow: hidden; text-overflow: ellipsis">
Contents overflow
</div>
25. Highlighting the Element that has Focus in a Form
input:focus { border: 1px dotted red;}
26. CSS Visibility or Display Property
visibility and display seems similar in terms of output
Visibility - When visibility is set to hidden, it carry the space but is not seen.
visibility:hidden;
Display - Display property is mostly use to hide the object by setting its value to none because it dose not carry space and other elements used to collapse in order to fill the space.
display:none;
27. Swapping Background Images When Hovered
swap the background image when mouse is over particular text , link or element
.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}
28. Set a Full Page Background Image
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
29. default Cursor with CSS
cursor: url(“image.cur”), default;
30. Double Boders Using CSS
.double {
border: 3px double #999;
}
31. Transform Text
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
32. Beveled box
img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}
32. Beveled box
#indented ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#indented ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
#indented ul li a:hover {background: #111;}
<div id="indented" class="box">
<ul>
<li><a href="#" target="_blank">r-ednalan</a></li>
</ul>
</div>
33. Fixed Footer Backgrounds
body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
width: 100%;
min-width:970px;
}
Tuesday, June 15, 2010
Display a loading image until the page completes loading
Display a loading image until the page completes loading
Demo
http://creativedesign-mind.com/r-ednalan/demo/loadingpage.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
jQuery(window).load(function() {
jQuery('#loading-image').hide();
});
});
</script>
<style>
#loading-image {
width: 55px;
height: 55px;
position: fixed;
top: 20px;
right: 40px;
z-index: 1;
}
</style>
Loading...
Demo
http://creativedesign-mind.com/r-ednalan/demo/loadingpage.html
CSS Image hover link
CSS Image hover link
Demo
http://creativedesign-mind.com/r-ednalan/demo/css_image_hover_link.html
Download
http://dl.dropbox.com/u/3293191/CSS/css_image_hover_link.zip
<style>
.rightColGetStarted a{background:url(homepage.png) no-repeat 0 -30px;height:48px;width:203px;display:block;position:relative;top:15px;left:12px;line-height:48px;text-align:center;color:white;font-size:17px;font-weight:bold;text-decoration:none;}
.rightColGetStarted a:hover{background-position:0 -78px;color:white;text-decoration:none;}
</style>
Demo
http://creativedesign-mind.com/r-ednalan/demo/css_image_hover_link.html
Download
http://dl.dropbox.com/u/3293191/CSS/css_image_hover_link.zip
Saturday, June 12, 2010
History PHP - MYSQL - JQUERY
History PHP - MYSQL - JQUERY
1. PHP
“Rasmus Lerdorf” – The creator of PHP Scripting language.
http://en.wikipedia.org/wiki/Rasmus_Lerdorf
http://lerdorf.com/bio.php
http://www.oracle.com/technology/pub/articles/php_experts/rasmus_php.html
2. MYSQL
“Michael Widenius” – Founder and original developer of MySQL
http://monty-says.blogspot.com/
3. JQuery
“John Resig” – The creator and lead developer of the jQuery JavaScript library.
http://ejohn.org/about/
http://ejohn.org/blog/
1. PHP
“Rasmus Lerdorf” – The creator of PHP Scripting language.
http://en.wikipedia.org/wiki/Rasmus_Lerdorf
http://lerdorf.com/bio.php
http://www.oracle.com/technology/pub/articles/php_experts/rasmus_php.html
2. MYSQL
“Michael Widenius” – Founder and original developer of MySQL
http://monty-says.blogspot.com/
3. JQuery
“John Resig” – The creator and lead developer of the jQuery JavaScript library.
http://ejohn.org/about/
http://ejohn.org/blog/
Thursday, June 10, 2010
Basic jquery effect
Basic web effect with jQuery
1. Page Loading Effects with jQuery
Demo
http://creativedesign-mind.com/r-ednalan/demo/pageloadingeffect.html
2. Delete Row HTML Table by clicking
Demo
http://creativedesign-mind.com/r-ednalan/demo/Delete_Row_from_HTML_Table.html
1. Page Loading Effects with jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#page_effect').fadeIn(2000);
});
</script>JQuery Page Loading Effect
This is page loading effect with JQuery 1
This is page loading effect with JQuery 2
Demo
http://creativedesign-mind.com/r-ednalan/demo/pageloadingeffect.html
2. Delete Row HTML Table by clicking
Demo
http://creativedesign-mind.com/r-ednalan/demo/Delete_Row_from_HTML_Table.html
Subscribe to:
Posts (Atom)