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

117 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
  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
  34. Hi Thanks for the nice information its very useful to read your blog. We provide best Block Chain Services

    ReplyDelete
  35. Hi Thanks for the nice information its very useful to read your blog. We provide best System Integration Services

    ReplyDelete
  36. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book Andaman holiday packages

    ReplyDelete
  37. Hi Thanks for the nice information its very useful to read your blog. We provide best company secretary course

    ReplyDelete
  38. Hi Thanks for the nice information its very useful to read your blog. We provide best Chartered Accountancy

    ReplyDelete
  39. Hi Thanks for the nice information its very useful to read your blog. We provide best Cost And Management Accountancy (CMA)

    ReplyDelete
  40. Hi Thanks for the nice information its very useful to read your blog. We provide best Certified Public Accountant

    ReplyDelete
  41. Hi Thanks for the nice information its very useful to read your blog. We provide best Certified Financial Analyst

    ReplyDelete
  42. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book ANDAMAN TOUR PACKAGE @24599

    ReplyDelete
  43. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book BEST ANDAMAN HONEYMOON PACKAGE @5999

    ReplyDelete
  44. Hi Thanks for the nice information its very useful to read your blog. We provide best Association Of Chartered Certified Accountants

    ReplyDelete
  45. Hi Thanks for the nice information its very useful to read your blog. We provide Software Development Services

    ReplyDelete
  46. Hi Thanks for the nice information its very useful to read your blog. We provide best Chartered Institute Of Management Accountants

    ReplyDelete
  47. Hi Thanks for the nice information its very useful to read your blog. We provide Software Development Services

    ReplyDelete
  48. Hi Thanks for the nice information its very useful to read your blog. We provide best Find All Isfs Courses

    ReplyDelete
  49. Thanks for sharing this blog, I am reading your post from the beginning, it was so interesting to read. Visit for
    Website Development Company in Delhi

    ReplyDelete
  50. It’s great to come across a blog every once in a while, that isn’t the same out of date rehashed material. Fantastic read.
    nebosh course in chennai

    ReplyDelete
  51. Thanks for sharing a valuable information to us. Thanks for your blog.
    CIMA training institute in Hyderabad | ISFS

    ReplyDelete
  52. Your article is really amazing with informative information,you are shared.Thanks a lot for sharing this wonderful blog.keep updating such a excellent post with us.
    Embedded System Training in Tambaram | Embedded Training in Tambaram

    ReplyDelete
  53. Very informative blog. Helps to gain knowledge about new concepts and techniques. Thanks a lot for sharing this wonderful blog.keep updating such a excellent post with us.
    Best MatLab Training Institute in OMR | No.1 MatLab Training Center in OMR

    ReplyDelete
  54. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    Best CCNA Training Institute in Guindy | No.1 CCNA Training Institute in Guindy

    ReplyDelete
  55. Very informative blog. Helps to gain knowledge about new concepts and techniques. Thanks a lot for sharing this wonderful blog.keep updating such a excellent post with us.
    AWS Exam Center in Chennai | AWS Certification Exams in Chennai | AWS Exams in Velachery

    ReplyDelete
  56. Thank you for your post. This was really an appreciating one. You done a good job. Keep on blogging like this unique information with us.
    Best Embedded Training Institute in Thiruvanmiyur | No.1 Embedded Training Institute in Thiruvanmiyur

    ReplyDelete
  57. This information is impressive. I am inspired with your post writing style & how continuously you describe this topic. Eagerly waiting for your new blog keep doing more.
    Ethical Hacking Training in Bangalore
    Ethical Hacking Institute in Bangalore
    Hacking Institute in Bangalore

    ReplyDelete
  58. nice topic which you have choose.
    second is, the information which you have provided is better then other blog.
    so nice work keep it up. And thanks for sharing.
    digital marketing company in delhi

    ReplyDelete
  59. Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision. This is a great inspiring article.I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post..
    AWS Exam Center in Chennai | AWS Certification Exams in Chennai | AWS Exams in Velachery

    ReplyDelete
  60. I have read your blog. Your information is really useful for beginner. informations provided here are unique and easy to understand.Thanks for this useful infromation.This is a great inspiring article.I am pretty much pleased with your good work.
    Linux Training Institute in Chennai | Linux Training in Velachery | RedHat Linux Training in Chennai

    ReplyDelete
  61. This is a great inspiring article.I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post..
    AWS Training Institute in Chennai | AWS Training in Velachery

    ReplyDelete
  62. nice topic which you have choose.
    second is, the information which you have provided is better then other blog.
    so nice work keep it up. And thanks for sharing. Laminated Doors manufacturer in hubli

    ReplyDelete

  63. Thanks for giving great kind of information. So useful and practical for me. Thanks for your excellent blog, nice work keep it up thanks for sharing the knowledge.
    led lawn lights in delhi

    ReplyDelete
  64. I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.
    Best Linux Training Institute in Chennai | Linux Training Center in Velachery

    ReplyDelete
  65. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    AWS Training Institute in Chennai | AWS Training in Velachery

    ReplyDelete
  66. Nice way of expressing your ideas with us.
    thanks for sharing with us and please add more information's.
    devops training near me
    devops training in bangalore
    devops training near me
    devops training in chennai

    ReplyDelete
  67. THANKS FOR INFORMATION

    you can search low-cost website with high-quality website functions.
    Today Join Us
    Call: +91 - 8076909847

    web development company in delhi

    levantro
    interior designers delhi


    livewebindia
    web design company

    top seo company in delhi

    Best It Service Provider:

    1. Website Designing And Development.
    2. SEO Services.
    3. Software Development.
    4. Mobile App Development.

    ReplyDelete
  68. Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.
    Best Web Designing Institute in Chennai
    Best web designing course in chennai
    web design classes
    PHP Training Center in Chennai
    PHP Institutes in Chennai
    PHP courses in chennai

    ReplyDelete
  69. Really amazing information!!! Thanks for your blog.

    edu-exam
    Guest posting sites

    ReplyDelete
  70. There are so many choices out there that I’m completely confused. Any suggestions? Thanks a lot.
    iosh safety course in chennai

    ReplyDelete
  71. A Professional mobile app development Canada company offering Android & iOS app development services. I like its sharing. Thanks you
    Mobile app development company in Canada

    ReplyDelete
  72. Very informative blog. Helps to gain knowledge about new concepts and techniques. Thanks a lot for sharing this wonderful blog.keep updating such a excellent post with us.
    Best AWS Training Center in Chennai | AWS Courses in Velachery

    ReplyDelete
  73. Good Post.Helps to gain knowledge about new concepts and techniques.Thank you so much for sharing with us.
    Best Java Training Institute in Chennai | Java Training in Velachery | J2EE Training in Chennai

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