Tag: CSS 3

Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , , with Leave a comment on Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video

Building Lightning component checkbox to have Twitter’s Heart like animation without any image or JavaScript.

Twitter uses image sprite and JavaScript to produce Like button animation. We would be giving same effect to checkbox by using Lightning component. Combination of Checkbox, Label and Box property of CSS3 is used to give final result.

Lightning Component will contain only declaration of checkbox as shown below.

TwitterLove.cmp


<aura:component >
<input id="toggle-heart" type="checkbox" />
<label for="toggle-heart">❤</label>
</aura:component>

Note : In above source code, heart UTF icon is getting replaced by emoji code, so refer this screen to see exact code written for Lightning Component.

We have used Sassy CSS (SCSS) in this demo, as it would be little bit hard to write pure CSS with animation. Once SCSS is written, we can use this online tool to convert it to CSS. All these are explained and build live on my channel. Continue reading “Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video”

CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 2 Comments on CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Style the Border in HTML with the Help of CSS 3 Border Style

Previously we have seen the Transform Operations using CSS3. In this article i will depict the New Border Properties in CSS 3. With the help of CSS 3, we can perform following two operations on border :

  1. Rounded Corner/ Border
  2. Border Shadow

Live Demo – Click Here Continue reading “CSS 3 Tutorial – Rounded Corner and Shadow Border effect”

Complete CSS 3 Tutorial – Transform Operations

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Complete CSS 3 Tutorial – Transform Operations

Complete CSS 3 Tutorial – Transform Operations – rotate, translate, scale, skew and matrix methods with Live Demo and source code

Cascading Style Sheet (CSS) is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.

With the help of CSS 3 other than just style now we can even animate, translate and do lots of stuff which were not possible by the CSS 2 and needed the help of other JavaScript library like JQuery UI.

In this tutorial we are going to learn different transform operations supported by the CSS 3.

The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.

Live Demo – Click Here.

Continue reading “Complete CSS 3 Tutorial – Transform Operations”