Showing posts with label LESS. Show all posts
Showing posts with label LESS. Show all posts

Thursday, July 6, 2017

How to Create Text Animation Using CSS

        , , , , , ,     1 comment   

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues.  For Example see bolow: @-webkit-keyframes...
Continue Reading →

Form Processing Steps Design Using HTML & CSS

        , , , , , ,     No comments   

In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I...
Continue Reading →

Tuesday, January 24, 2017

Adding and Display data using AngularJS

        , , , , , ,     No comments   

Hi Folks, In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap. Below is the code, you can directly copy and paste and run in your application. <!DOCTYPE html> <html> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width,...
Continue Reading →

Friday, January 20, 2017

Back to top page scroll using Jquery, CSS, HTML5

        , , , , , , , ,     No comments   

Hi, Today i will explain about how to scroll page to top from bottom. This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages. This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has...
Continue Reading →

Thursday, January 19, 2017

Animated “x” icon for the Bootstrap navbar-toggle using CSS (Or) Hamburger icon animation using Bootstrap and CSS

        , , , , , ,     No comments   

There are lots of posts online about that trendy (and awesome) transition from the hamburger icon (when the menu is collapsed) to that “x” (when the mobile menu has been expanded). This should be pulled off by CSS3 animations, of course. Below is the code , you can copy and paste ,run directly.. <!DOCTYPE html> <html> <head>   <meta name="viewport" content="width=device-width,...
Continue Reading →

Javascript shorten string without cutting words (Or) Javascript trim multiline string without cutting words

        , , , , , ,     1 comment   

In this article i will give Javascript code for trim multiline string without cutting words. Here i am giving an example, say i had the string text = "this is a long string i cant display" i want to trim it down to 10 characters but if it does't end with a space finish the word i don't want the string variable to look like this "this is a long string i cant dis" i want it to finish the word...
Continue Reading →

Wednesday, July 13, 2016

How to apply styles on a HTML input type "file" in Pure CSS

        , , , , , ,     No comments   

Bootstrap doesn’t have a designated component for a file upload button. In IE you will face cross browser issues,  To avoiding cross browser issues  i have found a solution. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code, Before write your html code you need to add required jQuery and bootstrap files in your <head> section. <link...
Continue Reading →

Thursday, June 16, 2016

How to display thumbnail preview link on whatsapp

        , , , , , , , , ,     10 comments   

Hai Folks, In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link,  Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp. For this there is a concept meta tags in html....
Continue Reading →

Wednesday, June 15, 2016

How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. )

        , , , , , ,     1 comment   

Hai my dear blog readers, In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc. We are using HTML5 attributes data-text for article text and data-link for article URL....
Continue Reading →

Monday, August 10, 2015

How to create a simple image slider using css

        , , , ,     No comments   

HTML Code: <div id="image-slider">    <figure>        <img src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MadagascarWallpaper21024.jpg" alt="">        <img src="http://img2.goodfon.su/original/1024x768/8/94/dota-2-nature-s-prophet-riki.jpg" alt="">        <img src="http://hdwallpapersbase.com/wp-content/uploads/2013/01/kung-fu-panda-legends-of-awesomeness-wallpaper.jpg"...
Continue Reading →
Subscribe to: Posts (Atom)

Popular Posts