Amfas Tech | Technology, Blogging & Internet Marketing: CSS
You are here:Home » Posts filed under CSS

9:39:00 AM

Avoid Content Theft on Your Website by Using Simple CSS3

If writing the content is one side of the coin, protecting it from being copied lies right on the other side of it. Copying content would actually involve in selecting the text on the webpage. This can be blinded by using CSS3 to the content copier which annoys him while doing the theft.

Note: Content on the website can be copied in many advanced ways. Selecting the text with the mouse and copying content is the most traditional way of copying content. This tutorial is for beginner bloggers and website owners who don’t have much idea about the defensive mechanisms in protecting the content. This technique might not help you at fullest of its purpose. So, we recommend you to go for DMCA Takedown services if you are pretty serious about your content.

avoid-content-theft

CSS3 have a selector named ::selection which can be used to style the selected text on the webpage. Using this selector, we can change the color, background, cursor and outline of the text. This selector was removed before the CSS3 recommendation status and can hopefully be added in the future version recommendations. However, this works well on all major browsers (with down versioning limit).

How it works?

As I told you in the above line that it can style color and background of the text, we are going to use the same properties to create a blind spot in the selection.

What is blind spot?
Blind spot is nothing but making the visibility of the text to zero using ::selection selector. For that, we use both the color and background properties.

Here is what you should do

Observe the following piece of code, I’ll guide you how to customize and install it on your website.

<style>
::-moz-selection { /* Code for Firefox */
    color: INSERT YOUR FONT COLOR ;
    background: AS SAME AS FONT COLOR;
}
::selection {
    color: INSERT YOUR FONT COLOR ;
    background: AS SAME AS FONT COLOR;
}
</style>

Add the color of your font on the webpage to both the color and background properties. This creates a mono-color selection style hiding the text within, thus creating confusion to the copier.

Add the above piece of code in <head> section of your website so that it will load up before the content.

Psych tip: Actually, copiers have less patience, that’s why they prefer the 30 sec copy-paste job to the 3-4 hours article writing one. So, If you could annoy him for 30 seconds at least, they will fly off your website.
Continue Reading
Labels : , , 12 comments

7:22:00 AM

Create Beautiful Rounded Profile Pictures using Simple CSS

Profile pictures are personal identifiers of an average internet user. We may not able to tweak the profile pictures on social media networking sites but, we can do the same on our blogs and personal webpages. Let’s see how to make some beautiful profile pictures using known CSS.

 

By using a simple CSS property called border-radius, we can bend the pictures’ square/rectangular shaped edges into circular shape. Increasing border-radius to 50% brings the required shape to the picture.

 

Setting the border radius alone will leave the picture with no border or bezel around it. It would look like something like this:

 

rounded-image-with-no-border

 

The code to display the above image is as follows:

 

CSS:

<style>
        .rpic img{
            border-radius: 50%;
        }
</style>

 

HTML:

<div class="rpic">
       <img src="http://pkfast.com/image.php?u=6018&dateline=1422394928"/>
</div>

 

Let’s make it beautiful with border-style property.

 

The width of the bezel (border-style) can be modified by using regular border-width property in CSS. So, the resultant CSS becomes this:

 

<style>
        .rpic img{
            border-radius: 50%;            

            border-style: solid;

            border-width: 5px;
        }
</style>

 

While the HTML remains the same.

 

Result: (Watch the following picture with border-style and border-width properties added to the code)

 

rounded-picture-border-style-width-added

 

border-style can be ‘dotted’, ‘dashed’, ‘double’, ‘groove’, ‘ridge’, ‘inset’, ‘outset’ other than ‘solid’. You can even use their combo like as ‘dotted solid double dashed’ and it will be applied clockwise starting from top edge. Take a look at this example (opens in new tab) on W3Schools for better idea.

 

The border style color of the picture can also be modified using the border-color property.

 

When added, the resultant code will look look this:

 

<style>
        .rpic img{
            border-radius: 50%;
            border-width: 5px;
            border-style: solid;
            border-color: #09aacc;
        }
</style>

 

Value for border-color property can be the name of the color, hexadecimal code or rgb(0,0,0) values.

 

Result:

 

rounded-picture-border-color

 

Hope that was made simple. Don’t forget to share with me your beautiful rounded profile picture in comments section below.

Continue Reading
Labels : , , 8 comments

7:45:00 PM

Reading Mode Widget/Plugin for Blogger and WordPress

Blogging is not all about creating content. It is also about gaining loyal readers. Apart from the quality of the content you provide, the visibility and readability of the content also matters. To be specific, readability includes font styles, backgrounds and eye-friendly modifications to the text on the webpage.

It is however difficult to modify the styles according to individual reader’s choice. So, it is better to leave that option to the reader himself. We have developed a simple and useful snippet of HTML/JS that allows the users change the font styles and sizes according to their eye feasting taste.

Reading Mode widget for blogger wordpress from amfastech

Copy the follow snippet of code and install it on your Blogger/WordPress blog.
<script>
function myFunction() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Open Sans";
}
function myFunction2() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Roboto";
}
function myFunction3() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction4() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction5() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="PT Sans";
}
function myFunction6() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Georgia";
}
</script>
<button type="button" onclick="myFunction()">Style 1</button>
<button type="button" onclick="myFunction2()">Style 2</button>
<button type="button" onclick="myFunction3()">Style 3</button>
<button type="button" onclick="myFunction4()">Style 4</button>
<button type="button" onclick="myFunction5()">Style 5</button>
<button type="button" onclick="myFunction6()">Style 6</button>

Customization

Change the ID “Blog1” with the blog post area of your blog. “Blog1” here is the blog post area of Blogger blog.

Change x.style.fontSize with the values of your choice.

Change x.style.color with the color of your choice.

Change x.style.fontFamily with the font family of your choice.

This is a basic script and needs to be tweaked. Any suggestions of the tweaks from your side are welcomed. You suggestions will be credited and updated in the article.
Continue Reading
Labels : , , , , Leave a Comment

9:29:00 PM

CSS3 Drop Shadow Effect: Adding Drop Shadow to the Text on Webpage

‘Drop shadow’ is one of the beautiful effects you can apply using CSS3. It can be used to add tiny shadow to highlight a piece of text on the webpage. Drop shadow effect on the text gives a slight elevated effect for the text on the page.

The text-shadow property lets you add shadows to text. Lets see this property in action.

Let us suppose the following code to be added with the shadow effect.

Code:
<h1>Baked Garlic</h1>
<p>Garlic may be known for being a little bit <em>stinky</em>, but
baked it is absolutely delicious and as long as you feed it to all
of your guests no-one will complain about the smell! Once baked
the garlic becomes creamy and sweet making an ideal spread to
accompany cheese.</p>

To get the ‘drop shadow’ effect, we need to add the text-shadow property to the tags used above. The CSS there by coded looks as follow:

h2 {
font-size: 250%;
color: #256579;
text-shadow: 3px 3px 3px #999;
}

Result:
The result for the above code would like this on the webpage:

The drop shadow on a heading

Using text-shadow property

So far we have seen the text-shadow property in action. Let’s see how can it be customized on a webpage.

To customize it, we should have an idea of its syntax. Then only we could mold it according to our requirement.

The syntax of the text-shadow property is as follows:

text-shadow: 5px, 5px, 5px, #999;

The first value 5px is horizontal distance from the text where as the second 5px is the vertical distance from it. The third value, 5px is the blur radius or spread of the shadow and the fourth value #999 is the color in hexadecimal code.

So, you are now well aware of the text-shadow property and so can play with the values of your own.

Tip: Use text-shadow property while applying styles to form buttons or big headings. It would be difficult to read if this property is applied for paragraph text.

Need any help in using text-shadow property? leave me a comment, I’ll get back to you!
Continue Reading
Labels : Leave a Comment

9:26:00 AM

Expanding Background Images on Mouse Hover with CSS

Hovering effects on background images give a good look over your image content on your website. It is easy to code images with hovering effects by using CSS. When an user hover the mouse over the image, the divs should not change their dimensions but images. This requires adding a simple CSS rule for background  image in the hover pseudo class. Let’s see clearly how an expanding feature for an image on hovering can be coded.

First let’s code the conventional HTML template of inserting an image we wanted to apply CSS for.

<!DOCTYPE html>
<html>
<head>
<title>Background image expansion on hover</title>
<!--- Include jquery and Google Map scripts. --->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="container">
        <div class="work" id="a">
        </div>
        <div class="work" id="b">
        </div>
        <div class="work" id="c">
        </div>
        <div class="work" id="d">
        </div>       
        <div class="work" id="e">
        </div>
        <div class="work" id="f">
        </div>
    </div>
</body>
</html>

In the above HTML code, the divs baring IDs a, b, c, d, e, f load the blocks of CSS code with images on to the webpage respectively. The ‘work’ class is the block of CSS code with hovering effect for images. So when a webpage is loaded, the both CSS blocks are loaded simultaneously.

The images can be inserted in div tags themselves but if any problem arises while loading CSS, they would look awkward on the half loaded webpage. So images are good to be loaded with the CSS only. If the CSS load, the images load else only text would appear on the webpage.

The CSS code for loading images on to the webpage is as follows:

#a {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_FamilyPicture.png);
}
#b {
    background-image: url(http://images.wikia.com/simpsons/images/archive/6/65/20100602024832!Bart_Simpson.png);
}
#c {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/9/9d/Maggie_Simpson.png);
}
#d {
    background-image: url(http://upload.wikimedia.org/wikipedia/en/a/ab/FuturamaReincarnation.png);
}
#e {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/7/7d/The_Brady_Bunch_%22The_Slumber_Party%22_1970.jpg);
}
#f {
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/4/44/Crowing_pains-PD_Looney_Tunes-_sylvester_%2B_foghorn.png);
}

We’re done with inserting images into respective divs. We need to apply the hovering code on to them. So, we would consider coding ‘work’ class now.

.work {
    width: 33.3333%;
    height: 200px;
    background-color: #ccc;
    float: left;
    -webkit-transition: 1.5s;
    overflow: hidden;
    background-size: 200px 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.work:hover {
    cursor: pointer;
      background-size: 300px 150%;
}

You can notice increasing the background size of 200px to 300px by 150%. This will evenly expand image without any zigzag stretching.

You may also apply styles for the the image container if wanted. The benefit of applying styles for the image container is that it loads the images in to specified dimensions. The code for ‘container’ class is as shown below:

.container {
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #aaa;
}

If you don’t want to apply styles for the container div(parent div), you may ignore the above part of CSS and remove “class=‘container’” from it. Then the HTML code would look like this:

<div>
        <div class="work" id="a">
        </div>
        <div class="work" id="b">
        </div>
        <div class="work" id="c">
        </div>
        <div class="work" id="d">
        </div>       
        <div class="work" id="e">
        </div>
        <div class="work" id="f">
        </div>
    </div>

Demo:

Continue Reading
Labels : , Leave a Comment

12:55:00 PM

Smooth CSS ‘Back-To-Top’ Widget for Blogger

Navigation is the crucial part of SEO. No doubt you write awesome articles in your blog and it can’t earn visitor’s appreciation if not properly navigated. There available many navigating plugins in which you might have added the ‘menu’ or ‘pages’ widget already. I’m talking about ‘that thing’ that would ease visitors get back to the top of the page where the menu exists. Yes! it is the ‘back to top’ widget. I use it on my site and recommend you to use it if you write long and long articles on your blog.

 

back to top widget

How to install the widget

Its so easy to install this widget. Simply follow the steps you read on below.

  1. Login to blogger > Go to your blog’s dashboard.
  2. Click on Layout > Add a Gadget > HTML/JavaScript.
  3. Copy the below code and paste it in the HTML/JavaScript widget space.
  4. Save the widget and check your blog/site once.
<!--Back to top widget Start--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 100px; right:5%; cursor:pointer;font:12px arial;'><img src='http://chrislorensson.com/wp-content/themes/yin_and_yang/images/layout/top-button.png
' width="50px" height="50px"/></a><!--Back to top widget End-->

 

Customization:

You can replace the following arrow URL with your wished one.

http://chrislorensson.com/wpcontent/themes/yin_and_yang/images/layout/top-button.png

Continue Reading
Labels : , Leave a Comment

10:20:00 AM

Recent Comments Widget with CSS effect

Hello friends, I am back with a new widget for blogger that exposes the visitors activity on your  website or blog. Recent Comments Widget is not a unknown widget to a blogger but the same with the new CSS effect is definitely not known.

 

You can watch the DEMO of the widget which was installed on a sample blog on the internet.

 

image

 

Recommended To You: Random Posts with Thumbnails Widget

Adding the Widget

To add this widget on to your blogger, go to Layout > Add a Gadget > HTML/JavaScript, paste the following code in it and Save.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}

</style>
<script type="text/javascript">
//<![CDATA[
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 35,
roundAvatar = true,
characters  = 40,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-commentsv3.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Customizing the code

You can customize the code as per your requirements. You can change,

numComments=5 to your desired number.

showAvatar=true to false if you don’t wanted to show the avatar of the commenter.

roundAvatar=true to false if you don’t want the default style of the commenter’s Avatar to be changed to round shape.

charachters=40 to your desired length.

defaultAvatar’s URL to your desired image URL.

hideCredits=true to false  if you wanted to display the credits of the code.

maxfeeds=50 to your desired length and

Replace ‘Your Name’ in adminBlog=’Your Name’ with your name.

Continue Reading
Labels : , Leave a Comment

7:07:00 PM

Phone Gap: Easily create apps using HTML, CSS and JavaScript || Latest Mobile Technology

“Easily create apps using the web technologies you know and love: HTML, CSS and JavaScript:
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.” is what PhoneGap.com says
Phonegap, (previously called Apache Callback, but now Apache Cordova) is an open-source mobile development framework produced by Nitobi, purchased by Adobe Systems. It enables software programmers to build applications for mobile devices using JavaScript, HTML5andCSS3, instead of device specific languages such as Objective-C. The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs).

See how phonegap works

 Here are the Features of PhoneGap as per the developers and Artwork

License

The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will always remain free and open source under the Apache License, Version 2.0.



See How To Use Guides On PhoneGap
Download PhoneGap Trail
Download Seminar On PhoneGap
Continue Reading
Labels : , Leave a Comment

8:02:00 PM

Learn HTML and CSS with W3 Schools Hege Refsnes, Stale Refsnes, Jan Egil Refsnes


Table of Contents 

Section I: HTML Basic
    Chapter 1: HTML Getting Started
      Chapter 2: HTML Fundamentals
          Chapter 3: HTML Elements
              Chapter 4: HTML Attributes
                  Chapter 5: HTML Headings, Rules, & Comments
                      Chapter 6: HTML Paragraphs
                          Chapter 7: HTML Text Formatting
                              Chapter 8: HTML Styles
                                  Chapter 9: HTML Links
                                      Chapter 10: HTML Images
                                          Chapter 11: HTML Tables
                                              Chapter 12: HTML Lists
                                                  Chapter 13: HTML Forms & Input
                                                      Chapter 14: HTML Color
                                                          Chapter 15: HTML 4.01 Quick List


                                                          Section II: HTML/CSS Advanced

                                                          Chapter 16: HTML Layout
                                                            Chapter 17: HTML Frames
                                                                Chapter 18: HTML Fonts
                                                                    Chapter 19: Why Use HTML 4.0?
                                                                        Chapter 20: HTML CSS Styles
                                                                            Chapter 21: HTML Character Entities
                                                                                Chapter 22: HTML Head & Meta Elements
                                                                                    Chapter 23: HTML Uniform Resource Locators
                                                                                        Chapter 24: HTML Scripts
                                                                                            Chapter 25: HTML Standard Attributes
                                                                                                Chapter 26: HTML Event Attributes
                                                                                                    Chapter 27: HTML URL Encoding
                                                                                                        Chapter 28: Turn Your PC Into a Web Server
                                                                                                            Chapter 29: HTML and CSS Summary




                                                                                                            Continue Reading
                                                                                                            Labels : , , Leave a Comment
                                                                                                            Return to top of page
                                                                                                            Copyright © 2016 · amfastech | Disclaimer | Privacy Policy