CSS - Create a Button with Hover

CSS - Create a Button with Hover

The CSS Code
a.button {
background: url(../images/button.png) no-repeat 0 0;
width: 186px;
height: 52px;
display: block;
text-indent: -9999px;
}
Hover State CSS
a.button:hover { background-position: 0 -52px; }
Click State CSS
a.button:active { background-position: 0 -104px; }

CSS3 Cross Browser Examples - rounded corners

CSS3 Cross Browser Examples - rounded corners

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

htaccess - Hide .php extension with url rewriting

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

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>

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'];
}

or

http://www.example.com/test/view/1/submit:yes

function view($id=null, $submit=null){
$get_variable_submit = $this->params['named']['submit'];
}

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);  
?>

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:

<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

Integrate WordPress Blog into CakePHP Application

Integrate WordPress Blog into CakePHP Application

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).

RewriteEngine on

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

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

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.

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

Learning jQuery in 30 minutes

Learning jQuery in 30 minutes

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

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/

Prototype Prototip

Prototype Prototip

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/

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

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

  <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

<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;
}

Display a loading image until the page completes loading

Display a loading image until the page completes loading

<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

<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>

    Get Started

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