Simple CSS - Responsive vCard & Title Attribute

Responsive vCard & Title Attribute

I'm creating a demo of responsive vCard box as well as giving a demo about "title" attribute. With the help of CSS we can stylized "title" attribute too like other elements.


<div class="vCard">
<img src="http://4.bp.blogspot.com/-PMdKDQ6bm1k/VFK2baK8iEI/AAAAAAAA0vY/mX6UsaXwK-c/s1600/Pawan%2BMall%2B-%2BProfile%2BPic-Small.jpg" />


  <h1>Hi, I am Pawan Mall!</h1>

<p>I'm something poet, marketer, social media consultant, web designer/developer/programmer,
blogger(as hobby) & a good human being. Originally from Gorakhpur, UP and currently living in
New Delhi, India. ..
 </p>

  <ul>
    <li><a href="#Twitter" title="Follow me on : Twitter">Twitter</a><li>
    <li><a href="#Facebook" title="Follow me on : Facebook">Facebook</a><li>
    <li><a href="#Google+" title="Follow me on : Google+">Google+</a><li>
    <li><a href="#CSSdeck" title="Follow me on : CSSdeck">CSSdeck</a><li>
    <li><a href="#CodePen" title="Follow me on : CodePen">CodePen</a><li>
  </ul>
  
</div>

/* 
// Simple CSS - Responsive vCard & Title(Attribute)
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

body{margin:0px;padding:0px;}

.vCard{
  margin:4% auto;
  padding:15px;
  width:80%;
  background-color:#fff;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-radius:10px;
}
.vCard img{
  margin:10% 0% 0% 30%;
  height:auto;
  width:35%;
  border-radius:50%;
  border:double 10px #CCC;
  box-shadow: 0 7px 4px #777;
}
.vCard h1{
  font-family: 'Lobster', cursive;
  text-align:center;
  text-shadow: 0 2px 1px #777;
}
.vCard p{
  font-family: 'Indie Flower', cursive;
  text-align:center;
  text-shadow: 0 2px 1px #777;
}

.vCard ul{
  list-style:none;
}
.vCard ul > li{
  display:inline-block;
  padding:5px;
  margin-bottom:10px;
  font-family: 'Shadows Into Light', cursive;
  
}
.vCard a:link, a:visited{
  text-decoration:none;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding:5px;
  border-radius:10px 0px 10px 0px;
  color:#000;
  font-weight:bolder;
}

.vCard a:hover{
  box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
  border-radius:0px 10px 0px 10px;
}

.vCard a[title]{
    position:relative;
    
}
.vCard a[title]:before{
 content: "";
 position:absolute;
 bottom:10px;
 border-width: 14px 7px;
 border-style: solid;
 border-color:#3c404b  transparent transparent transparent;
 left:-9999px;
    opacity:0;
 transition:.75s opacity, .75s bottom;
  
}

.vCard a[title]:after{
    content:attr(title);
    color: #FFF;
    font:bold 16px arial, sans-serif;
    background:#3c404b;    
    padding:10px;    
    position:absolute;
    left:-9999px;
    opacity:0;
    bottom:38px;
    white-space:nowrap;
    border-radius:8px;  
   transition:.75s opacity, .75s bottom;
    font-family: 'Indie Flower', cursive;
}

.vCard a[title]:hover:before{
 left:35px;
    opacity:1;
    bottom: 30px;
    
}
.vCard a[title]:hover:after{
    left:0px;
    opacity:1;
    bottom: 58px;
}
/* Animation Effect - effectRotateOut */
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 1;
  }
}

.vCard img:hover
{
animation:rotateOut 1s ;
-webkit-animation:rotateOut 1s ; /* Safari and Chrome */
}

No need for any JS script...

56 comments:

  1. Sometimes we get bored with white, we must exploring with other colors. psd to cssAnd the color of dark gray and orange seems to be quite good.

    ReplyDelete
  2. These all are notable facts… I stick with responsive website design for my business. With the mobile marketing is at its peak stage, having website that goes comfy on all devices will help your business. You can check my website for more details on the importance of responsive website design. PHP Training Institute in Chennai | Best PHP training in Chennai | PHP Training Institute in Chennai

    ReplyDelete
    Replies
    1. Responsive Web Design Twitter Bootstrap Mobile First Development Bootstrap Training Bootstrap Training in Chennai Bootstrap Training in Chennai Bootstrap Online Training Bootstrap Online Training JavaScript Training Courses JavaScript Training Courses

      Delete
  3. Thanks for your informative post. Your info graphic helped me to create my first blog on blogger platform. Please assist me whether my blog on Web designing Training in Chennai is eligible for AdSense.

    ReplyDelete
  4. Excellent Post, I welcome your interest about to post blogs. It will help many of them to update their skills in their interesting field.
    Regards,

    Python Training in Chennai|Python Training

    ReplyDelete
  5. Your blog is awesome..You have clearly explained about it ...Its very useful for me to know about new things..Keep on blogging..
    Web designing training in chennai

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I have read this content it is very nice with unique information and keep updating us.
    PHP Training in Chennai | PHP course in Chennai

    ReplyDelete
  8. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Web Designing Course in Chennai | web designing training in chennai

    ReplyDelete
  9. really you have post an informative blog.you have explained very well.thank you for sharing this blog.
    apachespark training

    ReplyDelete
  10. really you have post an informative blog.Thanks for sharing your Ideas.
    Cloud-Computing training in chennai

    ReplyDelete
  11. Thanks for your informative article. With the world is totally dependent on internet, the future of digital marketing is on positive note. It also assures lucrative career opportunity for professionals looking for job in digital marketing.
    Web designing course in chennai

    ReplyDelete
  12. I was working on the responsive design and this article provided me the lot of information about designing of website.Using this information i can create the look and feel websites.
    PHP Training in Chennai | PHP Course in Chennai

    ReplyDelete
  13. Nice Blog.Thank you for Sharing. I'm working in brave technologies private limited.we are leading cloud erp software solution in chennai

    ReplyDelete
  14. Really an amazing post..! By reading your blog post i gained more information.
    Bulk SMS Chennai
    Internet Marketing Company Chennai

    ReplyDelete
  15. I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Keep updating your post...
    No.1 Software Testing Training Institute in Chennai | Best Selenium Training Institute in Chennai | ISTQB Certification Center in Velachery

    ReplyDelete
  16. Nice blog. Thank you for sharing. The information you shared is very effective for learners I have got some important suggestions from it.
    C &C++ Training in Chennai | Embedded System Training in Chennai | VLSI Training Center in Chennai

    ReplyDelete
  17. I have read your blog its very attractive and impressive. I like it your blog.
    MBA Project Center in Chennai | MCA Project Center in Chennai | BBA Project Center in Chennai

    ReplyDelete
  18. Excellent post. Keep updating.I have got some useful information form this article.
    Robotics Training Center in Chennai | Robotics Project Center in Velachery

    ReplyDelete
  19. Informative and impressive. Keep Updating
    Jobbörse

    ReplyDelete
  20. Thanks for sharing this unique and informative content which provided me the required information.
    Power System Project Center in Chennai | Power System Project Center in Velachery

    ReplyDelete
  21. Nice blog. Thank you for sharing. The information you shared is very effective for learners I have got some important suggestions from it..
    Best VLSI Project Center in Chennai | VLSI Project Center in Velachery

    ReplyDelete
  22. Fantastic blog you are posted.Thanks for sharing such an wonderful post with us.
    No.1 Electrical Project Center in Chennai | Electrical Project Center in Velachery

    ReplyDelete
  23. I wish to show thanks to you just for bailing me out of this particular
    trouble.As a result of checking through the net and meeting
    techniques that were not productive, I thought my life was done.
    selenium training in chennai

    ReplyDelete
  24. Great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    MCA Project Center in Chennai | MCA Project Center in Velachery

    ReplyDelete
  25. Nice and good article, thanks for sharing your views and ideas, it is really useful to me..
    Final Year Project Center in Chennai | Final Year Project Center in Velachery

    ReplyDelete
  26. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.
    Digital Transformation Services | Austere Technologies

    ReplyDelete
  27. wow...nice blog, very helpful information. Thanks for sharing.

    IOT Services | Austere Technologies

    ReplyDelete
  28. Great article, really very helpful content you made. Thank you, keep sharing.

    Cloud Services | Austere Technologies

    ReplyDelete
  29. Excellent post. I have read your blog it's very interesting and informative. Keep sharing..
    Summer Courses in Chennai | Summer Courses in Velachery

    ReplyDelete
  30. Really great blog, it's very helpful and has great knowledgeable information. Thanks for sharing.

    Mobility Services | Austere Technologies

    ReplyDelete
  31. Great article, really very helpful content you made. Thank you, keep sharing.

    Best Quality Management Services | Austere Technologies

    ReplyDelete
  32. Looking really great article with usful content, thanks for sharing here and letting us know...
    Best Online Software Training Institute | HTML5 CSS3 Training

    ReplyDelete
  33. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.

    Best Commerce College| Avinash college of commerce

    ReplyDelete

Thank you for your comment.

 Image

 Image

About



I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Twitter
Facebook

Resume

Curriculum Vitae


Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA
mailpawanmall.net
www.pawanmall.net
Pawan Mall - resume photo avatar

Objective

I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Skills

  • Front-end
  • HTML/HTML5
  • CSS/CSS3
  • JS/jQuery
  • Bootstrap
  • Back-end
  • PHP/OOP
  • SQL/MySQL
  • Codeigniter Framework
  • cPanel & phpMyAdmin

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer/Leads Manager ~ 2007-2017

Contact Form

Contact

  • New Delhi, Delhi, India

  • +91 **********

  • mailpawanmall.net

Follow me on :-