Zoom in text using css3 animation


I was thinking how to animate text to zoom in just by using CSS3. Just by using simple HTML and CSS3 code we can achieve the target.

The HTML code is as simple as that -

<div id="zoomingText">
<span>This is some zooming in text.</span>
</div>
<input type="button" value="Animate text" onClick="addClass()">

And the CSS3 is as follows -

.text{
width: 100%;
height: 100px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
text-align:center;
}
.text span{
position: absolute;
width: 100%;
opacity: 0;
white-space: nowrap;
}
.text-2 span{
text-indent: 5px;
line-height: 90%;
color: #da0a0a;
-webkit-animation: rotateWordsSecond .5s ease-in;
-moz-animation: rotateWordsSecond .5s ease-in;
-o-animation: rotateWordsSecond .5s ease-in;
-ms-animation: rotateWordsSecond .5s ease-in;
animation: rotateWordsSecond .5s ease-in;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
}
@-webkit-keyframes rotateWordsSecond {
0% { opacity: .2; font-size: 600%;}
100% { opacity: 1; font-size: 150%;}
}
@-moz-keyframes rotateWordsSecond {
0% { opacity: .2; font-size: 600%;}
100% { opacity: 1; font-size: 150%;}
}
@-o-keyframes rotateWordsSecond {
0% { opacity: .2; font-size: 600%;}
100% { opacity: 1; font-size: 150%;}
}
@-ms-keyframes rotateWordsSecond {
0% { opacity: .2; font-size: 600%;}
100% { opacity: 1; font-size: 150%;}
}
@keyframes rotateWordsSecond {
0% { opacity: .2; font-size: 600%;}
100% { opacity: 1; font-size: 150%;}
}

JavaScript code is as follows -

function addClass(){
	document.getElementById('zoomingText').className="text text-2";
}

Live demo

————————————————————————————————————————————–




Posted in CSS, HTML5, Web Portal | Leave a comment

HTML5


Lately we were hearing lot of buzz about HTML5 and CSS3. HTML5 is introduced with new elements like Video, audio, animations with canvas, geolocation and many more. Actually you add richness to your markup with the proper use of these new elements.

Why we need all these new elements?

In our everyday codes we are using the <div id=”nav”>, <div class=”header”> and <div class=”footer”> with some CSS and JavaScript. These div elements have been replaced with nav, header and footer as new elements in HTML5. Below is the list of new elements introduced in HTML5.

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a dropdown list
<details> Defines details of an element
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation links
<output> Defines some types of output
<progress> Defines progress of a task of any kind
<rp> Used in ruby annotations to define what to show if a browser does not support the ruby element
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations
<section> Defines a section
<source> Defines media resources
<summery> Defines the header of a “detail” element
<time> Defines a date/time
<video> Defines a video
<wbr> Defines a possible line-brea

In this article I am not going to discuss about all the above elements but some more important elements.

In this four of the new elements called as sectioning elements. They are article, aside, nav and section.

Sectioning elements

<section>

The first, and most generic of the four new sectioning elements is section. According to HTML5 Documentation:

“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.

<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>

<article>

There’s been much debate on the web about the use of the article element. Originally the spec seemed a bit nebulous and confusing to some. With further clarification over time, the element has been defined as:

“The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

“When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.”

This example shows a blog post using the article element:

<article>
 <header>
 <h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>

In this the new element <time> is added. According to the spec:

“This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user’s calendar.”

<nav>

This sectioning element relates to navigation of your site and its pages. According to the spec:

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<div>
<article>
<header>
<h1>My Day at the Beach</h1>
</header>
<div>
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</div>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>

<aside>

The last sectioning element the aside. It is for the sidebar or the sidepanel of the page. According to the spec:

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

“The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.”

The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.

<aside>
<h1>Switzerland</h1>
<p>Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</p>
</aside>

There are two more most important elements header and footer.

<header>

The header element itself finds its place at the top of the page, is really more about identifying the importance of the content within it. The spec says:

“The header element represents a group of introductory or navigational aids.”

“A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”

You can have more than one header element in a page. You’ll likely have one global header, but sectioning elements can also have headers.

<footer>

As with header, you can have more than one footer element in a page. You’ll likely have one global footer, but sectioning elements can also have footers. The spec says this:

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

“When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”

Here is a page with two footers, one at the top and one at the bottom, with the same content:

<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<footer><a href="../">Back to index...</a></footer>
</body>

————————————————————————————————————————————–




Posted in HTML5, Web Portal | Leave a comment

Stiky footer



From long time we are trying out different ways to keep the footer attached at the bottom of the page. But still having an issue in different browsers, different resolutions and with different monitor screen size. Now have only one solution for all this issue that is just by using simple CSS and HTML with few CSS CLASSes.

sticky footer The HTML code used for the above image is

<!DOCTYPE HTML>
<html>
 <head>
 <link rel="stylesheet" href="layout.css"/>
 </head>
 <body>
 <div class="wrapper">
 <div class="header">
 <img src="http://venkatblog.com/wp-includes/images/venkat-blog-log.png"
 alt="venkatblog.com" />
 <h1>Sticky Footer using CSS</h1>
 </div>
 <p>Lorem Ipsum is simply dummy text of the ...</p>
 <p>Contrary to popular belief, Lorem Ipsum is...</p>
 </div>
 <div class="footer">
 <p>Copyright &copy; 2011-2012 Venkatesh Budi -
 <a href="http://venkatblog.com/" title="Web development">
 Web development</a></p>
 </div>
 </body>
</html>

And CSS code used is -

* { margin: 0; }
html, body { height: 100%; }
.wrapper { min-height: 100%;
          height: auto !important;
          height: 100%;
          margin: 0 auto -24px; /* the bottom margin is the negative
                                value of the footer's height */
}
.footer { height: 24px; background: gray; text-align: center; }

Live Demo
————————————————————————————————————————————–




Posted in CSS, Web Portal | Leave a comment

Perl script for Gecos fled update on AIX machine


First of all thanks to Venky for giving the space to post this blog.

There may be a scenario in which you want to get the data from the LDAP server and manipulate it.  LDAP server is a Light weight Data Protocol used for user authentication remotely.

/usr/gsa/bin/ldapsearch -h xxx.yyy.com -b o=yyy.com uid=$ID$COUNTRY

Above is the command “ldapsearch” in which you will be giving the xxx.yyy.com has the LDAP server name. For more on LDAP  please visit the link below  http://ressukka.net/2001/06/ldap/

when run the above command you will get the output similar to

              dn: cn=Imogen, ou=#linux, ou=irc, dc=example, dc=net
              cn: Imogen
              objectclass: top
              modes: bfo
              laston: 960852116 #Linux
              xtra: created 960300295

There is a unique ID (uid) given to ldapsearch as the arguement which is user_Id and Country_Id in my environment.

The script below parses  the ID and Country Code from /etc/passwd and updates the gecos field, where you can check by running the command  — lsuser -a gecos user_name. This was tested on AIX machine. Updating the gecos field is just one simple application. By modifying it slightly we can also use it on Linux.

#!/usr/bin/perl
#use strict;
use warnings;

my $args = @ARGV;
if($ARGV[0] eq “”){
print “please enter  password file as argument\n”;}
open my $fh, ‘<’ , $ARGV[0] or die “Could not open ‘$ARGV[0]‘: $!”;
while(my $line = <$fh>){

if($line =~ m/:/ && $line =~ m/;/){

@PASS = split(/:/, $line);
@PASS2 = split(/;/ , $PASS[4]);
#print “$PASS2[1]\n”;
chomp($PASS2[1]);
@PASS3 = split(/\//, $PASS2[1]);
#print “$PASS3[0]  $PASS3[2]\n”;

my $id = $PASS3[2];
my $country = $PASS3[0];
$country =~ s/^\s+//;   #white spaces removed
$id =~ s/\s+$//;        #white spaces removed
bluefind($id,$country);
}
elsif($line =~ m/,/ && $line =~ m/:/) {
@NPASS = split(/,/,$line);

@NPASS1 = split(/:/,$NPASS[1]);
@NPASS2 = split(/\//,$NPASS1[0]);
#print “@PASS2\n”;
$NPASS2[0] =~ s/^\s+//;
$NPASS2[2] =~ s/\s+$//;

bluefind($NPASS2[2],$NPASS2[0]);
}
}

sub bluefind{
my ($ID,$COUNTRY) = @_;
my $NAME=”";
my $EMPT=”";
my $MAIL=”";

$NAME = `/usr/gsa/bin/ldapsearch -h xxx.yyy.com -b o=yyy.com uid=$ID$COUNTRY cn |grep  ^cn|head -1`;
$NAME = substr($NAME, 4, );
chomp($NAME);

$EMPT = `/usr/gsa/bin/ldapsearch -h xxx.yyy.com -b o=yyy.com uid=$ID$COUNTRY employeetype|grep ^employeetype`;
$EMPT = substr($EMPT, 14, );
chomp($EMPT);

$MAIL = `/usr/gsa/bin/ldapsearch -h xxx.yyy.com -b o=yyy.com  uid=$ID$COUNTRY mail |grep ^mail|head -1`;
$MAIL = substr($MAIL, 6, );
chomp($MAIL);
if( $NAME eq “” ){
open (NOUSER, ‘>>./notfound.out’);
print NOUSER “@PASS[0]  –>$ID $COUNTRY Not found in bluepages\n”;
close (NOUSER);
}
else{
open (GECOS, ‘>>./gecos_update.ksh’);
print GECOS “chuser gecos=\”$NAME; $COUNTRY/$EMPT/$ID ;$MAIL\” @PASS[0]” . “\n”;
close (CHUSER);
}
print “$NAME $EMPT $MAIL @PASS[0]\n”;
}
close $fh;


Posted in Web Portal | Tagged | 3 Comments

Dreamweaver Event in Bangalore, India on 27th Nov 2010


Adobe has organized Dreamweaver event to get together and share their wisdom. Also to learn something about Dreamweaver and other web technology enabling tools.
When we went there to attend this event, not having exact idea about it. As soon as we went there, the people around us started interacting with us in the technology we work, feedback about dreamweaver, adobe products etc.
It started late, but went on with interesting discussion topics like community peoples discussion about problems faced during development of web application etc.
Finally got to know many things about dreamweaver CS5, Business Catalyst, debugging using CS5, viewing browser compatibility using adobe browserlab and many more.

Below are some of the links about the event -
1. If you are running into an issue and would like to bring it to Adobe’s notice, please file them via this link
2. If you would like to know what the Dreamweaver team has been up to, please feel free to follow them on their blog blogs.adobe.com/dreamweaver
3. As you are into web technology domain, hear from the management folks on what they have been ideating via this blog address blogs.adobe.com/designandweb
4. Adobe ID is a free membership opening up gates for lots of free goodies on Adobe Exchange and will keep you updated on the latest and greatest offering from Adobe

If you have been thinking what Adobe has been doing with HTML 5, please read our efforts on John’s blog entry

Thank you Adobe for organizing such wonderful event.




Posted in Web Portal | Leave a comment