TechPerish

There is a code snippet in CSS3 to disable text selection by user. Code below is cross-browser and might work well on all of the latest browsers like Chrome, Firefox, Safari and IE10+. 1. Disable Text Selection Highlighting Of Whole Page *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 2. Disable Text Selection Highlighting Of Specific Element (e.g.: A Div)  .unselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <div class="unselectable"> ...</div> More Information can be found at below link : https://developer.mozilla.org/en-US/docs/Web/CSS/user-select?redirectlocale=en-US&redirectslug=CSS/user-select

A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for. A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position. Today I am sharing a drop down menu for blogger with search box. Adding Floating DropDown menu to blogger Login to your blogger dashboard. Select your blog. Select Template . Click Edit HTML.  Add this code just above the body tag <style> #naviopdropcont{   width:100%;   height:45px;   display:block;   padding:0;   margin:0 0 20px 0;  z-index:100;   top:0px; left:0px;  position:fixed;     box-shadow:2px 2px 5px  #444444; -moz-box-box-shadow:2px 2px 5px  #444444; -web-kit-box-shadow:2px 2px 5px  #444444; -goog-ms-box-shadow:2px 2px 5px  #444444; background:#000; } #naviopdropnav{   f...

A search box helps your visitors find the information they are looking for easily and quickly. Most of users coming from search engines or landing at your homepage will want to search the information on your blog and they will need a search box. Today we are giving you a beautiful, responsive CSS3 search box for your Blogger blog. This search box will surely force your visitors to try a search on your blogspot blog. This search box is responsive and even works on non CSS3 supported browsers. How To Add Search Box To Blogger: 4 Steps 1. Go to Blogger Dashboard and select the blog to which you want to add the search box 2. Now click on Layout tab and add a new gadget in sidebar (or wherever you want to add it) and select HTML/Java Script for the gadget 3. Now paste the below code,  name the Title as Search or any other text(you can also leave it blank). <style>.searchform { display: inline-block; zoom: 1; display: inline-block; border: solid 1px #d2d2...

Hello Blogger's today i am sharing a trick with you  on how to add cool CSS style to your BlogSpot blog date header. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.  Customize Blogger Blog Date Header Step 1: Login to blogger dashboard with your Email and password. Step 2:  go to Template > Edit HTML Step 3: Click anywhere inside the text area where the code is and search (using CTRL + F ) for the following code: .date-header span Step 4:  Below this you may find the code above .date-header span { background-color: $(date.header.background.color); color: $(date.header.color); padding: $(date.header.padding); letter-spacing: $(date.header.letterspacing); margin: $(date.header.margin); } Step 5:  Now rep...

A child theme is a set of styling rules and/or functions that are used to add functionality or change the look of an existing WordPress theme. Child themes can be modified without altering the original code of your theme, allowing you to make changes as small as changing a couple of colors, or as extensive as completely changing the look and feel of your theme. Many WordPress framework themes, like Genesis, work by using the child theme feature in WordPress. The basic functionality of the theme is contained within the parent theme and child themes can then be used as a way of applying different “skins” to the theme. Why Use A Child Theme Here are a few reasons i have got to let you use child themes : If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality of original theme) and still keep your changes. It can speed up development time (and give you ...

So you have made all of your template with two cool colors of your choice, added one of you favorite web font and now only one thing is annoying you that is your browser's scroll bar color. And the question arising up in your mind is how can i change the scrollbar color. Can i change the scrollbar color ? ... and the answer is yes you can, with newest CSS3 and -webkit- it is possible to change the scrollbar color,style and background. How can i change the scrollbar color ? 1. For chrome and safari you can change the scrollbar colors using - /* Chrome, Safari */ ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece  { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } 2.But I have found another solution to this with adding some styles to it - 1. Rounded corners : ::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; } ::-webkit-scrollbar-thumb { bac...

Playing with CSS and HTMl I found how to create circular images using CSS3.It is just awsome thing to make images circular without photoshoping them. You may use them for any purpose or just for fun. So let's do it in real time. 1. The image below is a normal image. 2. Now we will add HTMl and CSS HTML <div class="rounded"></div> CSS .rounded { width: 300px; height: 300px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; background: url(http://link-to-your/image.png) no-repeat; } RESULT If you dont want the image as background and want to use image as img tag ypu can add these html and css. HTML <div class="rounded"></div><div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div> CSS .rounded{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: ...