Realistic CSS3 Box Shadows

Update: Here is a working demo

Update 2: I wrote a design article on designing box shadows in Photoshop for StudentWebHosting.com. Check that out too.

Update 3: I wrote a brand new tutorial which extends on this idea, and creates some pretty slick shadow effects! Check out the tutorial and demo on my biz website: http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/

Want to learn how to create the sexiest most real looking box shadows using pure CSS? Then I’ve got a trick for you. The standard Box Shadow that you can apply via CSS3 to a box is rather bland. It may look something like this.

Note: If you like this effect, please link to my post, don’t steal! Thanks.

boring shadows

Boring Shadows

It is nice and all, and a nice leap from having to do shadows with png background images and such, but it doesn’t quite cut it for me. So with a few tricks, and some magic. We’ll be creating this.

Sexy CSS Box Shadow

Sexy CSS Box Shadow

It gives the effect that the page is “curling” or lifting off of the page. This effect is achieved with PURE CSS and ONE single <div> tag!

Let’s get started.

The first thing we will need to do is set up our HTML. It is as basic as it gets folks.

Step 1

Simply create the following in your HTML document.

Text Here

Now that we have our Box in place, we can do the fancy stuff in CSS. We’ll be using CSS gradients, CSS Box Shadows, and CSS Text Shadows, but the actual trick, or effect comes into play with several “experminetal” css features. Namely: -transform [rotate,skew] and the Pseudo selectors :before and :after. We also throw in some z-index, and other goodies, but my particular effect (which I think I am the first to create) uses SKEW to make it all work.

The CSS Stuff

We need to set up our div via CSS with some basic styles. The following code, sets up our box, gives us a gradient background, gives our box an initial shadow, makes our entire page background gray, and centers our box on screen.

NOTE: I’ve only included the -webkit prefixes which will work on Safari, and Chrome. If you’re working in Firefox, please prefix accordingly. If you have no idea what I’m talking about, then you ought to learn about css prefixes first. Also check out Jeffery’s screencast at NETTUTS for a different sort of shadow but uses some of the same principles.

Step 2

body{
	background-color:#ddd;
}

#box{
	width:300px;
	height:300px;
	margin:50px auto;
	position:relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
       -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

Here is what it should look like.

box with Gradient

Simple Box, with CSS shadow and CSS Gradient Background

Step 3

Next we need to add the pseudo selector of :before and :after, which are sort of like “layers” of our box. This allows us to create new shadows and rotate and skew those “layers” separate from our original box. Thus allowing for nifty shadows. Here is the CSS.

#box:after{
	-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:10px;
	right:9px;
	width:70%;
	height:70%;
    -webkit-transform: rotate(5deg)
					   skew(10deg);
}

This takes advantage of the :after selector. We create another box shadow on our new “layer” make its background transparent, rotate it, and skew it, then use css positioning to move it to the bottom right of our original box.

This is what things should look like.

Box Shadow, skewed rotated

:after box shadow: rotated, skewed, and positioned.

I am going to leave the shadow in “front” of our box, so you can see how my magic skew comes into play, to create the more realistic shadow.

Step 4

Next we do almost the same thing, except we use the “:before” pseudo selector, and skew our box at a different angle, and make its shadow “WHITE”. This is the important part, to sell the effect.

Here is the CSS

#box:before{
	-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:46px;
	right:41px;
	width:50%;
	height:50%;
    -webkit-transform: rotate(20deg)
					   skew(45deg);
	
}

This is what it should look like. You should now be able to see the “ah-hah” of what i’m getting at.

both css box shadows

Boths CSS Shadows, one white, one black

Step 5

The last thing we do is add the z-index to our before and after selectors to move the shadows behind the box, not in front.

Give your :before selector a z-index of -1, and your :after a z-index of -2;

Before

	z-index:-1;

After

        font-family:Arial;
	font-size:3em;
	color:#fffb9b;
	text-align:center;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6),
				-1px -1px 1px rgba(0, 0, 0, 0.4);

And that’s it! This only opens up some of the possibilities of the shadows! By nesting another div or image in our original box we could open up a whole other dimension of fancy shadows and potentially create complex shadows on both sides of the box.

By varying the degree of “blur” in the shadows we can create different levels of depth for sharp or soft shadows. Link to me, as I appreciate the juice.

Sexy CSS Box Shadow

Sexy CSS Box Shadow

Andrew

Web Design Course

I’ve finished up launching another site that may be of use to those learning Web Design. The site is a training based web design course, which walks students through the entire web design process. We assume students know little or nothing about web design, Photoshop, or code and take then through intermediate to advanced web design topics.

Head over to the web design course website to check out a few sample videos and get a feel for the teaching and learning style. Many more web design course series are in the works!

The Great Bait & Switch AT&T Saga

I’ve been wanting to rant about this for a while now. Here is my one sentence summary: Why is it that AT&T can pull the bait and switch on millions of customers, and still be in business at all?

I signed up for an iPhone smart phone when the second generation phone came out. It was the iPhone 3G. It cost me oodles per month, and I was guaranteed “unlimited” data. A few months later (after they had hundreds of thousands of customers switch, because of their exclusive deal with Apple) they quickly dropped the “unlimited” data, and added tiered data plans.

It’s the classic bait and switch. It’s dirty, it’s mis-leading, it’s shady, it’s AT&T.

But they let you keep your unlimited data right? You’re grandfathered in, right?

Nope.

Shortly after the loathed ATT&T added their data plans, they “capped” unlimited data users. If you used a certain amount of data passed what their lowest tiered plan was, they throttled your connection speeds. Some users even took them to court over it.

Shortly after that, the pathetic AT&T company made it so you couldn’t even ALTER your plan, without losing unlimited data.

Shortly after that, they said in order to use Mobile Hotspot, you couldn’t have an unlimited data plan. (I maybe can see why here…)

Shortly after that, they said in order to use Apples “Facetime” plan, you can’t have unlimited data.

Mind you, if you wanted to do any of these features, you had to relinquish your unlimited data, and drop down to a capped plan.

Bate & Switch idiots.

Here’s what really got me. I had an unlimited plan with 250 text messaged a month. I was moving and knew I was going to be using text a bit more than on average in my new surroundings. I also knew this would be temporary. I called ATT to up my messages from 250 to the next highest. I told the agent I just wanted to do this for a month or two, and then go back to my old plan. He promised that I could do this without any problems, and it wouldn’t affect my plan or contract at all. If only right… ?!

I call 2 months later to switch back, they tell me that they no longer offer 250 text plans, and that I’d have to switch to “unlimited” texts. Which of course is only offered with a tiered data plan, which I’d have to sign up for, which would make me lose my unlimited data, and it’d cost me more per month, and I’d be in a new 2 year agreement. BUT, I’d have unlimited texts!!!

So AT&T refuses to downgrade me, and I’m stuck paying more money for texts that I’ll never use. Idiots. Complete idiots.

I drop calls like 50-cent drops $ in Vegas.

I can’t upgrade to the iPhone 5 and use face-time over cellular unless I’m on a family share plan. (Guess what, I’m single. So I guess I can’t do video chat.)

Shouldn’t a business that runs such “scams” have an F BBB rating? Honestly?

Needless to say, I’m ditching the scum-bags for some other hopefully less-scumbag-teleco company.

I do love how whenever I call up AT&T they make it a point to thank me for being a “valued iPhone customer”. What a crock-of-crap.

So, until I switch I’m going to upload some MASSIVE gigabyte file to my FTP server. And just download that puppy ALL NIGHT over 3G EVERY NIGHT. At least I’ll be getting my moneys worth for my useless ‘unlimited’ data plan…

Not only did they lose a customer, (whose dropped thousands in their pocked), they’ve lost credibility. I’ll rant and rave to anybody and everybody how crappy they are, their business practices are, and their actual cellular service is. and will recommend anybody or anything over their service.

The big joke for years was and is “I just wish I could use the ‘phone’ part of my iPhone with AT&T”.

My phone call placed to them today, where the customer service lady explained to me that the facetime over cellular feature that was only allowed on mobile data share plans was an “Apple restriction” (which I called her out on), was the last straw. Don’t try to place your pathetic restrictions on “hardware” and “Apple” and use some fancy terminology that would confuse most people. Idiots.

The views of this article accurately, exactly, and necessarily represent the opinions and views of ballyhooblog and its affiliates. :)

Restrict Access To Front End WordPress Content For Members Only

How’s that title for keywords!

Do you need to restrict access to certain portions of your website based on the post category? So did I. I tried a few different methods, and ended up mashing up my own workflow for content restriction in WordPress. I’m really not sure of how other plugins are accomplishing this, but here is mine:

Here’s our workflow and outline.

  • Creating a custom taxonomy (or use the default WordPress categories if you like)
  • Creating custom user roles & capabilities
  • Assign our custom capabilities to our administrator role (else admin won’t be able to see your restricted content)
  • Use WordPress Shortcode API to filter access to specific front-end content based on the category and user role
  • Assign our Users to their respective roles

One important note. This tutorial covers just the front-end restriction. It doesn’t have anything to do with the backend roles of post/category creation, editing, and so forth. Others have written tutorials about that.
I loosely got my idea for this from JT

Step 1: (The custom taxonomy)

Remember, you can skip this step if you just want to use the built in categories and posts.. It isn’t really needed at all.

We’re going to create a custom taxonomy called “goods”. We’ll then create a few types of ‘goods’ and eventually restrict font-end access to posts that are associated with various “goods”

Here’s the code for your ‘goods’ taxonomy. You can place all of the code in your functions.php file.

//hook into the init action and call create_goods_taxonomies when it fires
add_action( 'init', 'create_goods_taxonomies', 0 );

function create_goods_taxonomies(){
	
	register_taxonomy( 'goods', 
		array('post'), /* On what post type this taxonomy will appear */
		array('hierarchical' => true,     /* if this is true it acts like categories */             
			'labels' => array(
				'name' => __( 'Goods', 'bonestheme' ), /* name of the custom taxonomy */
				'singular_name' => __( 'Goods', 'bonestheme' ), /* single taxonomy name */
				'search_items' =>  __( 'Search Goods', 'bonestheme' ), /* search title for taxomony */
				'all_items' => __( 'All Goods', 'bonestheme' ), /* all title for taxonomies */
				'parent_item' => __( 'Parent Goods', 'bonestheme' ), /* parent title for taxonomy */
				'parent_item_colon' => __( 'Parent Goods:', 'bonestheme' ), /* parent taxonomy title */
				'edit_item' => __( 'Edit Goods', 'bonestheme' ), /* edit custom taxonomy title */
				'update_item' => __( 'Update Goods', 'bonestheme' ), /* update title for taxonomy */
				'add_new_item' => __( 'Add New Goods', 'bonestheme' ), /* add new title for taxonomy */
				'new_item_name' => __( 'New Goods Name', 'bonestheme' ) /* name title for taxonomy */
			),
			'show_ui' => true,
			'query_var' => true,
		)
	);   

}

Step 2: Add our custom user roles & capabilities


add_action( 'init', 'bh_roles_manager_activate');
function bh_roles_manager_activate(){
	
	$role = 'level_1_member';
	$display_name = "Level 1 Member";
	$capabilities = array('level_1_member' => true);
	
	add_role( $role, $display_name, $capabilities ); // Add our "level 1 member role"

 	$role = 'level_2_member';
	$display_name = "Level 2 Member";
	$capabilities = array('level_2_member' => true); 
	
	add_role( $role, $display_name, $capabilities ); // Add our "level 2 member role"
	
	$role = 'premium_member';
	$display_name = "Premium Member";
	$capabilities = array(
							'level_1_member' => true,
							'level_2_member' => true
							);
	
	add_role( $role, $display_name, $capabilities ); // Add our "Premium Member role" who has access to both level 1 and level 2 content

	// Give the administrator (or any other default wordpress roles) access to the content, else they won't see it either
	$admin_role = get_role('administrator');
	$admin_role->add_cap('level_1_member');
	$admin_role->add_cap('level_2_member');
	
}

Special Note: You don’t want to hook the role creation to INIT (like I’ve done), else it will fire each time INIT does. You only want to create the roles once, and would be ideal to put this in a plugin and have the role creation code execute on the plugin activation hook…

The code is pretty simple: It adds three new roles, gives each role a custom capabilities, and then we give the admin user access to the capabilities as well. We’re going to use these capabilities in our next step to restrict access to whatever pages we want.

Step 3 – Restrict Access via Shortcodes

Here is where the trick lies. We create a custom shortcode, and inside of our shortcode, we pass the value of one of our custom capabilities. We then use a bit of logic to restrict access if the users are not of that particular ‘role’.

add_shortcode( 'bh_goods_access', 'bh_goods_access_check_shortcode' );

function bh_goods_access_check_shortcode( $attr, $content = null ) {

	extract( shortcode_atts( array( 'permission' => null ), $attr ) );
	
	if ( current_user_can( $permission ) && !is_null( $content ) && !is_feed() )
		return $content;

	return "You don't have access the view this content.";
}

This code simply takes a shortcode of this structure (which you would put in your post content):

[bh_goods_access permission="level_1_member"]

Restricted Content Goes Here.  It could be just a portion of the post, or the entire post's content.  If the user is assigned to the "Level 1 Member" role, they'll have access, and see this content.  Otherwise, they'll see the 'restricted content' message we set up above..

[/bh_goods_access]

Now you can set up your posts, and categories however you like. In order to restrict access, you just add that simple shortcode, and put the capability name in the permission value. In order to grant permission to certain users to see that content, you just edit their profile, and assign them to the corresponding user role. Piece-o-cake. You could even extend it a bit further by auto-assigning them to a role through any particular action they take on the site (i.e. when they purchase a product, when they comment, when they dontate etc).

You could extend this a bit by returning different values in the shortcode return statement based on their role, and then doing additional logic in the theme template file such as redirection, custom messages etc. You could also check which post category (or custom taxonomy) inside of the shortcode logic, and restrict/grant access based on their role along with the category/taxonomy the post was assigned to.

Any other tricks ya’ll have up your sleeve for content restriction?

Student Web Hosting

Being an educator, I frequently work with students who need an affordable, easy and reliable hosting solution. I’ve worked with many different hosts and found some better than others. When a web design student is working through college, it can be invaluable to have their own web host and domain name to test and learn in real world scenarios.

I’m happy to announce and recommend a hosting solution catered to students. Head on over to Student Web Hosting to get affordable web hosting for student designers and developers. I will provide a discount code which will give even further savings and student hosting discounts.

The site is nearly complete, and will be taking new customers within two weeks.

Mobile Ads CTR – Publishers are crazy

I’ve been wanting to weight in on the topic of CTR (Click Through Rates) on Mobile devices for quite some time. I’ve actually never implemented a mobile ad set-up via Apples iAds or Googles AdMob. It seems pretty straight forward and much like the traditional AdWords approach.

The topic I wanted to broach was CTR rate on Mobile Ads. Here is what I’ve found from several informal surveys I’ve conduced with colleagues, students, and other associates.

95% of ‘clicks’ or shall I say ‘taps’ on mobile ads served from mobile websites, or native apps are ACCIDENTAL.

Case in point: I’ve clicked on hundreds and hundreds of these ads in the 5 years I’ve been rocking an iPhone. I have NEVER purposely, with full intention, clicked on one of these mobile ads. Not once. Nada. Never. Zip. Zilch.

Am I a lone case here? Surely the advertisers are aware of this. Are they actually getting any ROI whatsoever from these ads? Can some advertiser weigh in here? Do you realize that 95% of all the ‘clicks’ on your ad were accidental, or done by my 3 year old son?

The mobile Ad space is really broken. Re-inforced by Apples alteration of their iAd and payout program for mobile ads over and over