Welcome to my blog :)

This is a site comprised of a personal collection of notes and information serving as a single reference place for examples, tips, codes, testing, instructions, workarounds and troubleshooting with a record of external links to help during web design or managing and maintaining mobile devices and PC. I'm not a novice nor an expert...just a LittleBitGeeky here on blogspot.com

Showing posts with label CSS Properties. Show all posts
Showing posts with label CSS Properties. Show all posts

Saturday, September 20, 2014

Web Design: Search Engine Optimization SEO


SEO-Search Engine Optimization for High Ranking
Methods and Important Development Factors to Optimize Website

It is known that users typically don't look past the 2nd page on search results, if not just the 1st page alone. Page one is the top 10 ranking sites and page two is the top 20 raking sites. The importance of correctly developing the right type of website is of great value in respect to your sites ability to move up the ranking ladder.  Structure of the layout design, accessibility and validity to web robots are key ingredients for a successful top ranked website.

Author: Karen Grady

Sources:
Google SEO Optimization Recommendations Guide
     Download PDF
Google Webmasters Guide
     -https://www.google.com/webmasters/tools/home?hl=en
     -Submit Website to use Webmaster Tools:
     -Submit Canonical Domain & Submit XML Sitemap for crawlers


Table of Contents: 
About Search Engine Ranking
Factors of Search Result Ranking
Outline of Individual Factors


About Search Engine Ranking: 


There is no guarantee that your site will automatically rank first for queries in Google, but with certain methods implemented into the web design itself (SEO-Search Engine Optimization) will allow the search engines (SE) to crawl, index and understand your content in the best way possible. Thus this will increase your chances of being at the top portion of the search result list. "Organic" search results are ones that occur "naturally". SEO in the web design affects only organic search results, not paid or "sponsored" results, so that's what I focus on.  Technical details are listed below in the SEO Area's of Concentration section.

Moreover, companies or sites that claim to guarantee high ranking typically employ deceptive tactics to fool the search engine bots, and if your domain (website name) is affiliated with such site, your site could be banned from the Google index permanently. One example is comment spammers, like when an advertisement for Viagra is added to the comment box with a link to that site. This can actually hurt your sites reputation, thus is the reason behind using image Captcha's when public comments are allowed or why most sites require users to sign up for an account in order to comment.

Factors of Search Result Ranking:


Listed in chronological development order, are the main factors that directly effect search engine ranking, which if done correctly will promote your website to a higher rank or inadvertently hurt your website if the web robots read the wrong type of data and/or is corrupted by external entities.

1) First and foremost, is optimizing the website design to specifically target search engines in order to validate your site to gain the proper reputation status for your site. Important design features are applying the correct data values to HTML [via tags like <title>, <meta descriptions> and <!DOCTYPE>], organizing and naming the file structure itself to produce "friendly" URL page addresses, site map  hierarchy order, accessibility from any device or user settings and correctly configuring the layout to making sure that mobile search engine robots recognize the site as valid and trustworthy.

2) Submitting the site (and specific siteMap.txt document) to each search engine initially lets the site presence be known, thus minimizing the initial wait time for search engines to "find" your site.

3) Actual site traffic,  the more hits the higher the value.

4) Links to and from the site, to/from other reputable websites promotes your own site's reputation.


Outline of Individual Factors:


1) HTML HEAD: TITLE AND DESCRIPTION META TAG 

<title> 
-The contents of the title tag will usually appear in the first line of the results, words appear in bold that match search sting.
-Use a short to the point title and apply a unique title to each page.
-Place in the head section of a HTML document.
<meta name="description=" content="....">
-Add one or two sentences or a short paragraph fully describing the page and apply a unique description to each individual page. This is the default display that's positioned below the title. Or alternatively, the display will return be a more relevant section of the page that more correctly matches the search sting query.
-Place in the head section of a HTML document.
Example of Both:<html>
<head>
<title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
              UNDERLINED SEARCH RESULT TITLE<meta name="description=" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events in">
              DISPLAYS UNDER THE TITLE</head>
<body>


2) HTML HEAD:  KEYWORDS
-DO NOT USE KEYWORDS ANY MORE!
-Google and Bing crawlers could deem your site as SPAM and be omitted from search results.


3) FILE STRUCTURE FOR URL PAGE ADDRESSES:  
-Allows web crawlers like Googlebot to index URL'S efficiently.
-Friendly Folder and File Names create user friendly URL's .
-Google suggests using hypens vs underscores.

File: The Site Map Inclusion Protocol = "sitemap.txt"
-https://support.google.com/webmasters/answer/183668?hl=en
-A special file created to submit your website and get your web pages indexed by search engines
-Build a sitemap in a standard XML file and submit to Google
XML Example:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
</url>
</urlset>
-or use 3rd party tools to generate the file. Here's a list https://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
-Break up a large sitemap into a set of smaller sitemaps to prevent server overload. A sitemap file has 50,000 URLs limit and 50 MB uncompressed size.
-Use a sitemap index file to list all your sitemaps and submit this single file to Google rather than submitting individual sitemaps.


File: The Robots Exclusion Protocol="/robots.txt"
-Meaning a "suggestion" for bots to Do Not Crawl this page
-Example: User-agent: * Disallow: / tells All Robots that it should not visit any pages on the site.
-Example: Disallow: /tmp/ or Disallow: /junk/ excludes all robots from only these parts of the server
-Use other methods to secure sensitive information as this robots.txt file is a public file.
-It is not to be used to try and hide information.
-Should be placed in the top-level directory of your web server so the URL is http://www.websitename.com/robots.txt.

4) URL ACCESSIBILITY STRUCTURE: 

*All pages have a min of one static access link
-Note that Dynamic generation of documents can result in small changes because of counters, timestamps, or advertisements.
*Test Spider Accessibility on the Site
-using Lynx Screen Browser.
-Web crawlers basically see what screen readers see.
-Ensures site will display without JavaScript or other coding.
*Canonical Domain Page Structure for Multiple URLs
-The preferred domain is the version that you want used for your site in the search results.
-Sets www or http:// as the preferred version for Search Engines to use, no matter what version is accessed.
-Sets one page as main from its IDENTICAL content twin
-i.e. text only or printer friendly versions.
-(does mobile sites apply?)
-Do not link to same page from root directory and from subdomain, i.e. "domain.com/page.htm" and "sub.domain.com/page.htm"
-Warning about using this wrong! Mainly use rel=canonical for dynamic urls, eCommerce with filtered lists, syndicated content like someone else using your content on their page, which they would all the rel link.
-<topHead link rel="canonical"> is merely a hint, not an actual redirect.
-Preferred method vs rel link is to set up a 301 redirect from dup pages to dominant page
*Mobile Searches: are a separate entity and must be submitted to SE Separately
-Submit its own sitemap to let its presence be known
-A mobile <!DOCTYPE> must be declared.

*Dual SiteMaps: One for user, One XML to submit to Google for Crawlers
-Note that a 3rd one needs to be created and submitted separately to Google if using a separate mobile site
*Mobile Sites: 2 different sites with 2 separate URL's
- /m/ for mobile added to URL address
-Means 2 sites to build, maintain, update and submit to search engines
-My New Responsive Website Design omits the need for separate mobile site.

*Single Site for all Devices: 1 site with 1 URL
MY NEW HTML5 + PURE CSS3 RESPONSIVE LIQUID LAYOUT w/ VERTICAL FLOW AND PURE CSS MULTI LEVEL RESPONSIVE DROPDOWN MENU
Using the new HTML5 with CSS3 media queries to build an automatic adjustable layout for all screen sizes and types of devices.
Pure CSS
-Means that the main functions of the website rely soley on CSS specifications.
-Website requires no JavaScript (or any other scrips) to function properly.
-The layout will stack, stretch and contract upon user font size alterations and screen zoom levels.
-The horizontal menu will drop down vertically on hover, keyboard, click or touch.
-Both the responsive layout and menu automatically conforms to all sizes of mobile devices.
Responsive
-Means it will adapt its size and content to fit any screen size (w/Mobile 1st Theory)
-Incorporating a responsive drop down navigation menu, for mobile specific menu
-No JavaScript. Instead use CSS3 Media Query
@media only screen and (min-width : 000px) {...the css...}
Liquid
-Means width will expand and grow upon any screen size change.
-Method: Using relative % and em unit of measure, VS absolute PX values
Vertical Flow
-Means all element groups have the same height and line up equally on the baseline
-Typography Method: Using the Golden Ratio 1.618 equations to calculate heights & widths
-Flow ratio results in a 16px default font with a 1.618em/26 unitless Line Height to use as the Magic Number Multiplier
Single URL Address
-Means no separate (m) mobile site, thus no Googlebot-Mobile SE web crawler
-WARNING: Googlebot may can recognize site as "Cloaked" if not configured correctly, which could cause SE to drop the site from search result completely. Relevant content MUST BE THE SAME thats served to both Googlebot and Googlebot-Mobile. Read in Google Webmasters SEO PDF Guide.
5) LINKING TO AND FROM OTHER WEBSITES:
The more other sites link to your site, the greater the visibility for crawlers in search results. Each website's reputation is passed to one another by any links to and from other each others websites.
Add link to your site to other reputable sites
-Submit or try to add your site to BBB, PhoneBooks, Chambers, Any Local Sites as well any national and global sites with related products or services.
-Maybe even social sites like blogs (esp Google Blogger I would think), facebook, G+, twitter etc. plus sharing would spread the links around globally
Other website links posted on your site: Works Both Ways
-Bad sites: like spammers who put a link on your site like in a public user comment will pass along their bad reputation to your site.
-Use Captcha's, add restrictions or other measures.
-apply to specific link:
<a href="http://www.shadyseo.com" rel="nofollow">Comment spammer</a>
-apply to all links on entire page
<meta name="robots" content="nofollow">
-Good Sites: pass along their good reputation
-Using individual photo hosting sites for images VS on the server itself would also apply more valid linking.
-Create a "LINK PAGE" and add any and websites that could be related in any way to your website, as well as information about the physical location area.

6) CONTENT: 
-Write information rich, quality content on home page vs Keyword List.
-Google may determine a list of keywords or cloaked page deceptive and ignore the site entirely.
-This may be keywords listed in html, as it refereed to text that users cannot see?

7) NAVIGATION:
-Besides user's ability to navigate through the sites pages, it also helps SE's know what is important. Although it doesn't return the navigational values, it still help the engine see the big picture of the sites structure and contents.
-See the Website Linking section above to add a new page or menu link


-Webmaster Guide states that 100% nav via dropmenu should be avoided. Hmmmm?
-My Opinion: I am assuming this is in regards to screen readers and devices that don't use or allow scripts. I would think my new responsive design would be OK since my responsive dropmenu doesn't rely on JavaScript to function, it is Pure CSS. The only issue would be people that HAS NOT updated browsers AND doesn't support the new media querries AND doesn't allow scripts.
-IMO adding alternative nav links would be a backup if the main drop down multi level menu may not be accessible. Alternative Methods could be a Breadcrumb Trail under header and/or a Site Map Page link in the Footer.






Thursday, September 4, 2014

Web Designer Resource List

Resource List 
For Web Designer


Table of Contents
* Main Web Design Elements
* Browser Support
* HTML5, CSS3, JS
* Styling Charts & Values

MAIN WEB DESIGN ELEMENTS

Desktop Program-HTML/CSS Editor: Notepad++
DreamWeaver Basic Alternative: Open Source. No Fee. No Trial. No Demo.
Developer Site: http://notepad-plus-plus.org/
cNet: http://download.cnet.com/Notepad/3000-2352_4-10327521.html
List of Best Editors

Desktop Program-Graphic Manipulation: Gimp2.8
PhotoShop Alternative: Open Source. No Fee. No Trial. No Demo.
Developer Site: http://www.gimp.org/
   -Plug In's
   -Help Documentation
   -User Manual Download
cNet: http://download.cnet.com/GIMP/3000-2192_4-10073935.html

HTML Markup Code Validator: W3C
http://validator.w3.org/

CSS Code Validator: W3C
http://jigsaw.w3.org/css-validator/

HTML WYSIWYG Editor: W3schools
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_style



BROWSER SUPPORT

CSS3 Browser Support Reference Chart
http://www.w3schools.com/cssref/css3_browsersupport.asp

Browser Type Usage Yearly Statistics and Trends Chart
http://www.w3schools.com/browsers/browsers_stats.asp



HTML, CSS, JS REFERENCE

HTML5 Reference
http://www.w3schools.com/html/html5_intro.asp
New Elements: http://www.w3schools.com/html/html5_new_elements.asp
New Page Semantics: http://www.w3schools.com/html/html5_semantic_elements.asp

CSS3 Reference
http://www.w3schools.com/cssref/

CSS3 Selectors Quick Chart 
(~ + > ::before,  first child, last of type hover target focus)
http://www.w3schools.com/cssref/css_selectors.asp

JavaScript Reference
Full Tutorial: http://www.w3schools.com/js/default.asp




STYLING CHARTS & VALUES

Color Names & HEX Value Chart
http://www.w3schools.com/cssref/css_colorsfull.asp

Standard Web Safe Fonts-Viewable Examples
http://cssfontstack.com/

Linked Web Fonts: 
Google Web Fonts-Viewable Expamples & Link Codes
https://www.google.com/fonts
-Google Fonts are powered by the Google Fonts API
-Choose from, list, add to your collection, choose size
-HTML code given:
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
-CSS code given:
font-family: 'Rock Salt', cursive;
Online Code Generator (prob HTML4?)
http://www.html.am/html-editors/online-html-editor.cfm


Domain Hosting & Name Registration


**********************************
Current Domain Parking Only:

My Domain Name: www.ozarkmountainsonline.com:
Who Is....http://who.is/whois/ozarkmountainsonline.com
History.....http://who.is/domain-history/ozarkmountainsonline.com
Registrar Info September 04, 2014
Name: TUCOWS DOMAINS INC.
Whois Server: whois.tucows.com
Referral URL: http://domainhelp.opensrs.net
Status: OK
Important Dates:
Registered On: October 31, 2005 (Hostica)
Updated On: October 31, 2011 (Cirtex)
Expires On: October 31, 2016

Name Servers:
ns7.cirtexhosting.com 108.165.20.118
ns8.cirtexhosting.com 50.22.172.19

Website
http://www.cirtexhosting.com/


Past domain parking & hosting

Hostica
http://www.hostica.com/
Registered On October 31, 2005
Updated On October 27, 2009
Expires On October 31, 2011
Name Servers:
ns1.hostica.com 208.43.98.100
ns2.hostica.com 50.23.212.113
ns3.hostica.com 67.228.114.233

****************************************

Top Hosting Companies: Consumer Rankings Top 10

1&1
https://www.1and1.com/web-hosting?linkId=hd.mainnav.hosting#top

Powerful Unlimited Space with the performance you need with the ability to expand as you grow.Hosting without limits. Affordable, reliable hosting without limits for endless potential. 

*Price: $0.99 mo
*Free domain for the life of your package…not just the first year
*Daily Backups Including Webspace Recovery in case you need it
*Daily Backups Including Webspace Recovery in case you need it
*Unlimited Webspace Endless space for your growing business
*Unlimited Websites One place for all your web projects
*Unlimited Bandwidth. RELIABLE Always on, Secure.
*Hundreds of AppsEasy and fast installations of open source apps and widgets, with security updates available
*Easy 1-Click Install, Intuitive Control Panel.

1&1 Unlimited Plan includes 1 domain or transfer or DNS point to new 1&1

Wednesday, September 3, 2014

Web Design: Email

All things involving website email

Table of Contents:
*mailto: Links
*Hiding email address
   -CAPTCHA
   -Browser Encoding
   -Javascript & Php
   -CSS Pseudo-Classes

mailto: Links

Regular mailto: links
Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.


Hiding email address from spam bots
Either don’t put it on the web page or take the necessary precautions. 

Source:
http://www.labnol.org/internet/hide-email-address-web-pages/28364/
http://www.w3schools.com/php/php_secure_mail.asp

CAPTCHA
Google’s reCAPTCHA service. It hide your email address behind a CAPTCHA image that requires user interface.

Browser Encoded Address
You can also encode email addresses in the browser. The encoded html mailto: address shows up on the client side as actual email address and copies accordingly.

*online encoder: http://ctrlq.org/encode/
-Just type the email address you want to encode.
-Copy the code we provide.
-Paste the code where the address should be.

my encoded yahoo email: &#107;&#97;&#121;&#97;&#107;&#99;&#104;&#105;&#99;&#52;&#51;&#50;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;

Insert html a:link:
<a href="mailto:&#107;&#97;&#121;&#97;&#107;&#99;&#104;&#105;&#99;&#52;&#51;&#50;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;
" target="_top">
Send Mail</a>


Hide Email through CSS pseudo-classes

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>


Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>


Javascript

Obfuscate Email through JavaScript using the ‘onclick’ event. You can create a regular mailto hyperlink for your email address but replace some of the characters – like the dot and the @ sign – with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.

<a href = "mailto:johnATgmailDOTcom"
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>Contact Me</a>


Random Array

Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.

<span id="email"></span>

<script>
  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
</script>


WordPress + PHP

If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes &#97; and the @ symbol becomes &#64;) though they will render correctly in the browser.

<?php echo antispambot("john@abc.com"); ?>


PHP Secure E-mails

PHP Stopping E-mail Injections: The best way to stop e-mail injections is to validate the input. The code below is the same as in the previous chapter, but now we have added an input validator that checks the "from" field in the form.  Code uses PHP filters to validate input:
-The FILTER_SANITIZE_EMAIL filter removes all illegal e-mail characters from a string
-The FILTER_VALIDATE_EMAIL filter validates value as an e-mail address

<html>
<body>
<?php
function spamcheck($field) {
  // Sanitize e-mail address
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);
  // Validate e-mail address
  if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
    return TRUE;
  } else {
    return FALSE;
  }
}
?>

<h2>Feedback Form</h2>
<?php
// display form if user has not clicked submit
if (!isset($_POST["submit"])) {
  ?>
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  From: <input type="text" name="from"><br>
  Subject: <input type="text" name="subject"><br>
  Message: <textarea rows="10" cols="40" name="message"></textarea><br>
  <input type="submit" name="submit" value="Submit Feedback">
  </form>
  <?php
} else {  // the user has submitted the form
  // Check if the "from" input field is filled out
  if (isset($_POST["from"])) {
    // Check if "from" email address is valid
    $mailcheck = spamcheck($_POST["from"]);
    if ($mailcheck==FALSE) {
      echo "Invalid input";
    } else {
      $from = $_POST["from"]; // sender
      $subject = $_POST["subject"];
      $message = $_POST["message"];
      // message lines should not exceed 70 characters (PHP rule), so wrap it
      $message = wordwrap($message, 70);
      // send mail
      mail("webmaster@example.com",$subject,$message,"From: $from\n");
      echo "Thank you for sending us feedback";
    }
  }
}
?>
</body>
</html>

Tuesday, September 2, 2014

Web Design: CSS Pseudo Classes (Links)

CSS2 Pseudo-Classes
CSS3 Pseudo-Elements

Source:
http://www.w3schools.com/css/css_pseudo_classes.asp
http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
http://css-tricks.com/almanac/selectors/f/focus/
http://www.labnol.org/internet/hide-email-address-web-pages/28364/

Key Information:
* CSS pseudo-classes are used to add special effects to some selectors.
* CSS 1-2 pseudo-classes used for <a> hyperlinks,
* but CSS 3 introduced pseudo-elements that can be used for plain text.
* a:hover MUST come after a:link and a:visited in the CSS definition.
* a:active MUST come after a:hover in the CSS definition.
* Pseudo-class names are not case-sensitive.
* For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
* Hide email through pseudo classes

The syntax of pseudo-classes:
selector:pseudo-class
     {property:value;}

CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class
     {property:value;}

CSS Heresy Order:
a {color: red;}
a:link {color: black;}...style links to unvisited pages
a:visited {color: white;}...style after the link has been viewed
a:hover {color: cyan;} ... mouseover effect
a:active {color: maroon;}...link becomes active onclick or while holding down
a:focus {border: 1px solid red;}....INPUT-after click or keyboard or tabbing or other
a:focus:active state...When button is clicked, it is in
a:focus:hover {color: lime;}... after click while hovering

Focus:
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes works.

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused"

More examples:
P.cl1:hover {background: yellow;}
TD:hover {background: silver;}
TD A:hover {color: red; background: yellow;}

The selector matches any <p> element that is the first child of any element:
p:first-child {color: blue;}

The selector matches the first <i> element in all <p> elements:
p > i:first-child {color: blue;}

The selector matches all <i> elements in <p> elements that are the first child of another element:
p:first-child i {color: blue;}

The ::after pseudo-element can be used to insert some content after the content of an element.The following example inserts an image after each <h1> element:
h1::after {content: url(smiley.gif);}

/* unvisited link */ a:link {color: #FF0000;}

/* visited link */ a:visited { color: #00FF00;}

/* mouse over link */ a:hover {color: #FF00FF;}

/* selected link */ a:active {color: #0000FF;}


List of Pseudo Class and Element:

Selector Example     Example description

:link           a:link            Selects all unvisited links
:visited  a:visited        Selects all visited links
:active  a:active         Selects the active link
:hover  a:hover         Selects links on mouse over
:focus  input:focus    Selects the input element which has focus
::first-letter  p::first-letter   Selects the first letter of every <p> element
::first-line  p::first-line     Selects the first line of every <p> element
:first-child  p:first-child    Selects all <p> elements thats the first child of parent
::before  p::before        Insert content before every <p> element
::after  p::after           Insert content after every <p> element
:lang(language) p:lang(it)  Selects all <p> elements with a lang attribute value starting with "it"


Hide Email through CSS pseudo-classes:

Hide mailto: email address from spam bots thats posted on your website.

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>

Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>

Other Choices for hiding email:
*Obfuscate Email through JavaScript
*Random Array
*WordPress + PHP
*CAPTCHA's
*Encode email addresses in the browser

*See separate EMAIL post for all information




Web Design: CSS Animated Hide/Show Transitions

<!--http://css3.bradshawenterprises.com/animating_height/-->
<!--CSS Transitions Animated Height from 0 (hidden) to auto (reveal)-->
<!--according menu sets the max height to target (onclick) vs on hover.....ul.VmainMenu li:target ul with max-height set at 100% for fluid auto adjusting submenus-->


This is some content that could be any length. In fact, click on it to edit it in place.
Hover over the grey box.
So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.
<!DOCTYPE html>
<html>
<head>
<style>
.outside_box {
width:200px;
height:200px;
background-color: grey;
margin:0 auto 1em;
}
.our_content {
color:white;
background-color:#444;
border-bottom:1px white solid;

max-height:0;
overflow:hidden;

-webkit-transition:max-height 0.8s;
-moz-transition:max-height 0.8s;
transition:max-height 0.8s;
}
.our_content p {
padding:10px;
}
.outside_box:hover .our_content {
max-height:200px;
}
</style>
<div class='outside_box'>
<div class="our_content">
<p contenteditable>This is some content that could be any length. In fact, click on it to edit it in place.</p>
</div>
</div>
<p class='center'><b>Hover over the grey box.</b></p>

<p>So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.</p>
<h2>Simplified CSS</h2>
<pre class="prettyprint lang-css">
.our_content {
/* Initially we don't want any height, and we want the contents to be hidden */
max-height: 0;
overflow: hidden;

/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.outside_box:hover .our_content {
/* On hover, set the max-height to something large. In this case there's an obvious limit. */
max-height: 200px;
}
</body>
</html>

Monday, September 1, 2014

Web Design: Slicemaker Pure CSS Accordion Menu


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>An Creative CSS3 Vertical Menu Created by SliceMaker Soft</title>
<meta name="keywords" content="css3 vertical menu, creative css3 vertical menu, css3 vertical menu free download">
<meta name="description" content="This is a free CSS3 vertival menu created by SliceMaker Soft. You can free download this CSS3 vertical menu and then edit it for your own use.">

<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<style type="text/css">
body {
background-color: #666;
}
.demo {
width: 200px;
height: 400px;
margin: 40px auto 0;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu > li > a:before,
.menu > li > a:after {
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}
.menu > li:nth-child(1) > a:before{
content:"friend";
}
.menu > li:nth-child(2) > a:before{
content:"video";
}
.menu > li:nth-child(3) > a:before{
content:"paint";
}
.menu > li:nth-child(4) > a:before{
content:"android";
}
.menu > li > a:after{
content:"plus";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "minus";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}
@font-face {
    font-family: 'LigatureSymbols';
    src: url('font/LigatureSymbols-2.05.eot');
    src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
         url('font/LigatureSymbols-2.05.woff') format('woff'),
         url('font/LigatureSymbols-2.05.ttf') format('truetype'),
         url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>

------------------------------------------

<!--SPECIAL VISUALS TAKEN OUT OF ORIGINAL CODE-->

<!DOCTYPE HTML>
<html lang="en-US">
<head>

<style>

.demo {
width: 100%; /*200px*/
height: 100%; /*400px*/
/*margin: 40px auto 0;*/
        background-color: #666;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
        list-style-type: none; /*added to remove bullets*/
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu ul li {list-style-type: none; /*added to remove bullets*/}

.menu > li > a:before,
.menu > li > a:after {
font-family: arial;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}

.menu > li > a:after{
content:"+";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "-";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}

</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens</a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>
---------------------------------------------------

Saturday, August 23, 2014

Web Design: CSS Cascading Style Sheets


CSS Cascading Style Sheets
Formatting Tips, Workarounds, Reference Record & Examples

"A CONTINUING WORK IN PROGRESS"
Last update 8-25-14

Table of Contents:
Resources
Reset Browser Default Page Settings
Nav Menus
The new CSS3 elements

Also more CSS articles in separate post pages:
Inline Block
Line Height
Browser Reset

Web Design: Inline Block


CSS 2.1 Inline Block Display Property
Tips, workarounds and information

"A CONTINUING WORK IN PROGRESS"
Last update 8-24-14

Inline Block displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. 

Inline-Block element is only supported by IE8+. Internet Explorer 6 and 7 only supports elements that are naturally inline by default. Inline-block is naturally a block element thats forced to inline. See the workaround compatibility solution below for IE and other browsers.

TABLE OF CONTENTS:
Block VS Inline-Block
Browser Versions that accept Inline-Block
Cross Browser Workaround Fix for Inline-Block
Vertical Align: Middle for Inline Block

Web Design: Line Height


Line Height CSS1 Property

"A CONTINUING WORK IN PROGRESS"
Last update 8-24-14

The line-height property specifies the line height (or line spacing). Its the space between lines of text. Negative values are not allowed.

*GO TO BOTTOM OF PAGE TO SEE ACTUAL HTML RESULTS ON THIS SITE