In my recent developing adventures, my adjacent sibling suggested I try out this Chrome Extension: PerfectPixel OddsMonkey free trialThis extension lets you overlay an image of your final site over the page rendered in the browser. For example, if you are working in Photoshop, save the whole page as a png/jpg, then use the extension and […]
Hi folks! Happy Holidays. I hope your Thanksgiving weekend was wonderful. I wanted to share with you something I found in my research for a big project I am working on. (I hope I can share with you soon!) In trying to find an easy way to convert a gradient from image to code, I […]
In practice of positioning and also to use as reference later, I created some speech bubbles. Enjoy – Monica Speech bubble, top arrow Speech bubble, right arrow Speech bubble, down arrow Speech bubble, left arrow
Tetris & The Power of CSSAdjusting the last “orphan” block in a grid. Very interesting read from Heydon Pickering.
The background-size property is the primary focus of this exercise. I was inspired by the album cover from The Neighbourhood album I Love You. I was thinking it had a simple portfolio landing-page look, so I used it as my inspiration for this project. I used a great, large sky image that I optimized in Photoshop […]
In my third and final article, I am going to add the final touches to my menu. To recap: Part I – Building the menu Part II – Adding the gradient Part III – Border-radius, box-shadows, and final touches I am going to review the box-shadow and border-radius, then look at the final touches […]
Hi there. This post is going to cover adding a gradient to our menu from Part I. This is what the final menu will look like after Part III: And here is what the gradient will look like added to my menu, after we wrap up Part II: A note about browser support: IE 10 […]
This starts my three part series of creating the following menu: My first post will be creating the basic menu, the next post will be adding in gradients, and the third and final post I will add border-radius and box-shadows, as well as some polish, to finish it up. Here we go! I am going […]
I am going to take a dive into border-radius, gradients, and menus. See you soon! – Monica I am going to attempt a layman’s description of block formatting context. Woo! – Lynn
In a practical attempt to use stars, I wanted to put together this American flag. I used CSS stars (created here), positioning, and the z-index. Good ol’ American flag: Check out the code here: live demo