Front End Development, Technology

Create Accordion with CSS and HTML without JS

There are many way to create the accordion effect with js but following are the example of how to create the accordion only with css and html. Here is the image that show which type of accordion I am going to create. Now starts with html code: In this I have used checkbox to use the functionality of click. But we will not display...

by Amit Narayan
Tag: HTML/UI/CSS
04-Nov-2015

Android, Mobility

mailto links on android devices

Recently we added a feature that uses the mailto link. While testing it was found that working fine on Desktops, iPhones, and iPad's but not on android devices. To debug it quickly, we created a test page with just mailto link in it as shown below <a href="mailto:someone@example.com?Subject=Hello%20again" target="_blank">Send...

by Parampreet Singh
Tag: HTML/UI/CSS
02-Sep-2015

Technology

Getting familiar with Sitemaps

About Sitemap Sitemap is an XML file that include URLs of a website and their basic information like last updated, how often it changes and how much important it is as compared to other URLs by giving its priority. Purpose of Sitemap The information listed in Sitemap.xml file is used by the search engines to decide efficiently which...

by Rishabh Dixit
Tag: HTML/UI/CSS
30-Jul-2015

Technology

Deep dive into CSS Pseudo Elements.

We all are familiar with the Pseudo classes that css provides us to target certain elements that matches up certain criteria or state. And they are signified by a single colon followed by the pseudo class. Syntax for pseudo class: [code]selector:pseudo-class { property:value; }[/code] Some of the basic examples of pseudo...

by Vibhor Kukreja
Tag: HTML/UI/CSS
27-Jul-2015

Technology

Build Custom iOS Swipe Button with CSS3

There are many ways to make iOS swipe button with toggle effect: But CSS and CSS3 is the best way to make these buttons because of its light weight. Here is the image of what we are going to make: Let’s start with the HTML code In this I have used checkbox to use the functionality of click. But we will not display these input...

by Sunniya Maini
Tag: HTML/UI/CSS
24-Jul-2015

Technology

Different Ways for aligning an element Vertically-Center in HTML using CSS

Aligning an element the way we want is never an easy task, especially when a non-UI developer is doing it and this problem worsens when we try to align that element Vertically-Center. Although doing it using patches is not difficult, but doing it the right way is a challenge. Here you’ll find some cool CSS techniques by which you can...

by Kavita Upadhyay
Tag: HTML/UI/CSS
24-Jul-2015

Node.js

Sharing content using META tags

Meta Tags Meta tags in HTML documents provide metadata/information about a web page, or the content it contains. They must be declared within head section of the web page only. They are used to specify page description, keywords (for search purposes), author information or any other metadata giving additional information about the...

by Rishabh Dixit
Tag: HTML/UI/CSS
20-Jul-2015

Front End Development, Technology

HTML Email Fundamentals

As we know so many tools are for rendering email, for desktop like AOL, Outlook and Thunderbird and web-based email services like Google, Hotmail and Yahoo! Mail. If you thought it was hard to ensure the cross-browser compatibility, be aware that this is a whole new game - each of these email software tools can display the same email in...

by Amit Narayan
Tag: HTML/UI/CSS
24-Jun-2015

Technology

Difference b/w Display:inline and inline-block

The CSS property "Display" is very useful and commonly used property of CSS which contains lots of values. In this blog we'll talk about only "display:inline" and "display:inline-block". We generally use both these properties to allow other elements to sit to their left and right but it has some difference which is explained below. ...

by Kapil Chotwani
Tag: HTML/UI/CSS
09-Jun-2015

Technology

Using “srcset”: Responsive inline images

Hi guys, With the advent of "retina" screens in our day-to-day life, usage of high resolution images has not only increased, but has also become a necessity to shed the shabby look of your website. For those who don't know, "retina" display is a marketing term that was introduced by Apple and is used to refer to their line of products...

by Roni C. Thomas
Tag: HTML/UI/CSS
01-Mar-2015

Grails

Vertical Labels with Google Chart API

While working with Google charts, we usually face issues with long labels on the horizontal axis. The chart displays well, however the X-axis labels are not completely visible and displays the numbers like this: 24/3.. 25/3.. 26/3.. 27/3.. 28/3.. 30/3.. 31/3.. instead of 24/3/2006, 25/3/2006, 6/3/2006, 27/3/2006, 28/3/2006,...

by Mansi Arora
Tag: HTML/UI/CSS
20-Feb-2015

Technology

How to get name initials as an image?

While making an application, showing user's image is a very common use case. Gone were the days when we used to show anonymous image in case a person's profile image or display image is not present. We can easily show a person's name initials as an image to identify the person. Like : Lets consider this html, where we use an...

by Sakshi Tyagi
Tag: HTML/UI/CSS
07-Dec-2014