en en en en en en en pt en en en en en en en en la la la en en en la la la ta en en en en en en en en en en kn ja en en ur de en en en en en en en en en en en en en en nl ca nl pt ru th en en kn ja lt en en fr en kn ja en en kn lt en pt kn en en en en it en en en en ru en ta en en en en en en en en en en en en en en en en en
CSS Archives - EmJay Web Designs
Drop Cap CSS3 Tutorial and How To
Recently I was asked by a client to drop cap the first letter on all of the paragraphs on a particular page. Here’s how to solve that for every paragraph and the second solution below that only does the drop cap for the first letter of the first paragraph. Your selectors will be a bit different than what I have here but getting to the p tag is your goal to make this work.
First letter of each paragraph
This is controlled through the p:first-letter selector by selecting the first letter of all p selectors in the div with id #ipsumpost.
#ipsumpost p:first-letter { float: left; color: #d54746; font-size: 1.8em; line-height: 0.7em; padding-top: 6px; padding-right: .1em; padding-left: 0px;font-family: Georgia;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac risus nec sem condimentum ultricies eget vitae nunc. Vestibulum vestibulum pretium leo quis aliquam. Sed augue purus, volutpat et rutrum non, facilisis quis libero. Curabitur id sem tempor tellus vehicula luctus. Quisque pellentesque, diam ut tincidunt lacinia, mi urna semper nibh, quis fringilla neque eros sit amet massa. Duis vulputate auctor ligula a eleifend. Phasellus bibendum cursus interdum.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pretium odio nec eros viverra porttitor. Vivamus facilisis rhoncus turpis, ac pellentesque nisi auctor eget. Integer imperdiet orci ut arcu egestas at convallis nunc viverra. Donec non mauris quam. Integer vel mauris velit. Curabitur dapibus nibh at purus vulputate semper. Sed elementum aliquet sapien, a hendrerit ligula lobortis at.
Mauris id dolor eu felis hendrerit pellentesque. Mauris commodo posuere neque a cursus. In hac habitasse platea dictumst. Proin ac vulputate est. In ornare pulvinar nulla, vel tincidunt lectus pellentesque a. Etiam lorem nulla, mollis vel placerat a, varius quis neque. Etiam faucibus aliquam nisl sit amet adipiscing.
First letter of only the first paragraph
This is controlled through the p:first-child:first letter by selecting only the first letter of the first following p selector in the div with id #ipsumpost2.
#ipsumpost2 p:first-child:first-letter { float: left; color: #d54746; font-size: 1.8em; line-height: 0.7em; padding-top: 6px; padding-right: .1em; padding-left: 0px;font-family: Georgia;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac risus nec sem condimentum ultricies eget vitae nunc. Vestibulum vestibulum pretium leo quis aliquam. Sed augue purus, volutpat et rutrum non, facilisis quis libero. Curabitur id sem tempor tellus vehicula luctus. Quisque pellentesque, diam ut tincidunt lacinia, mi urna semper nibh, quis fringilla neque eros sit amet massa. Duis vulputate auctor ligula a eleifend. Phasellus bibendum cursus interdum.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pretium odio nec eros viverra porttitor. Vivamus facilisis rhoncus turpis, ac pellentesque nisi auctor eget. Integer imperdiet orci ut arcu egestas at convallis nunc viverra. Donec non mauris quam. Integer vel mauris velit. Curabitur dapibus nibh at purus vulputate semper. Sed elementum aliquet sapien, a hendrerit ligula lobortis at.
Mauris id dolor eu felis hendrerit pellentesque. Mauris commodo posuere neque a cursus. In hac habitasse platea dictumst. Proin ac vulputate est. In ornare pulvinar nulla, vel tincidunt lectus pellentesque a. Etiam lorem nulla, mollis vel placerat a, varius quis neque. Etiam faucibus aliquam nisl sit amet adipiscing.
Creating a CSS3 Wrap Around Ribbon in an IThemes Child
Sunday, February 12th, 2012
I’ve been working on a client site KCPS LLC. using the IThemes Depot child theme and I really like the wrap around ribbon that is used for the navigation module in this theme it adds a nice look and touch to have that effect vs. that of just a standard flat menu. Here is an image of the site and the wrap around ribbon that I’m referring to.
For this particular design as I looked at the page I decided that I wanted to use the same look, feel and effect on the inside pages of the site to separate the content from the headers and the footer on these pages. Since I used a large image on the front page of this site I felt that looked better without the separator at the bottom and that’s what drove my decision just to do this on the inside pages.
In order to accomplish this I had to add an HTML module to the layout that I was using for the inside pages just above the footer. When I created the module I added the following code to create a div on the page with an “id” that I could then target and style with CSS.
In order to keep consistent with the look and feel of the navigation bar and the gradient that was used I looked it up in the child themes style.css. Once I had the style then I recreated the style in the CSS for the wraparound div using the following CSS.
margin:0 -30px 30px -30px; /* 30 = 20 padding + 10 neg margin */
box-shadow:0 4px 4px rgba(0,0,0,0.3);
background-image: -webkit-gradient(linear, left top, left bottom, from(#616161), to(#313131));
background-image: -webkit-linear-gradient(top, #616161, #313131);
background-image: -moz-linear-gradient(top, #616161, #313131);
background-image: -o-linear-gradient(top, #616161, #313131);
background-image: -ms-linear-gradient(top, #616161, #313131);
background-image: linear-gradient(top, #616161, #313131);
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-webkit-box-shadow: rgba(0,0,0,.3) 0 6px 6px -3px;
-moz-box-shadow: rgba(0,0,0,.3) 0 6px 6px -3px;
box-shadow: rgba(0,0,0,.3) 0 6px 6px -3p
border-top:10px solid #715926; /* Colour of the triangle. To flip the effect, use border-bottom. */
bottom:-11px; /* +1 to compensate for the border */
left:-1px; /* Only required if the element has a border */
A few things to notice in the above CSS is that you need to determine the wrapper for the HTML module and set it’s overflow to visible in order for this to work as well as setting the height of the div to match that of your navigation module.
Once this is complete you’ll have the following look on the page with the bottom seperator.
Categories : CSS, IThemes, Wordpress
Wednesday, August 10th, 2011
I like the letter press effect where it appears the text is punched down into the surface of the page. This is a good effect for navigation bars and hover effects. Best part is all of this is achieved using CSS text shadow styling.
The effect is created by adding a shadow that’s lighter than the color of the text, this gives the effect of depth.  A 2-3px vertical offset and a little blurriness helps complete the effect.
color: #000000; text-shadow: 0px 2px 3px #222222; text-shadow: X-Offset Y-Offset Blur Color
Located in: Georgetown, Texas
Serving Clients Around the Globe
Send Us a Message
Stretching his hand up to reach the stars, too often man forgets the flowers at his feet.
How to Launch Chrome as Default Browser from Thunderbird
Drop Cap CSS3 Tutorial and How To
Remove the WordPress Version from your page head section
XAMPP and multiple instances of MySQL on Windows
Change Color Image to Black and White Image on Hover using CSS
Copyright © 2017 All Rights Reserved
iThemes Builder by iThemes