FDSign - Adult Design » CSS

GayBeef Tube

Harvey — Wed, 29 Dec 2010 23:06:56 +0000

Tube layout and coding for GayBeef Tube. The thumbnail sample is an slightly different version I liked better, so for the same price you have 2 previews, the one here and the live one, hah!

Private School Jewel Galleries

admin — Sat, 25 Dec 2010 13:00:53 +0000

We made a batch of galleries for Private School Jewel and they came up very nice, check them out by yourself! We also fixed all the XHTML and Flash code, CSS and added some semantic SEO for Jewel’s site, but since we didn’t design, well, no preview, we can’t take credit for other people’s work

Jay’s POV Site

admin — Sun, 26 Sep 2010 03:16:43 +0000

This is a site that, as you may imagine, is about POV content. It’s also about HD and we were instructed to do things within very specific work frames, and the result is this: a light-weight, no non-sense modern look tour which converts like hot cakes

You can see a working version of this tour here. It also includes a very complete members area as well as an special join page not displayed here since the site isn’t alive yet

Tutorial: Same Height Columns

Harvey — Sun, 10 Jan 2010 19:31:09 +0000

So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just… 10 lines of CSS. And to make it more fun, I’ll use some techniques that will help you to achieve things that most people is afraid of: same height columns!

So, you can see the sample at here

The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won’t want anything more complicated like this.

Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this:

Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head>

<title>Page Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="container">



  <div id="header"><h1>This is the Header</h1></div>



<!--*************************************START LEFT COLUMN ***********************************************-->



    <div id="leftcol"><h2>The left column</h2><p>And the text for the left column</p></div>



<!--*************************************END LEFT COLUMN ***********************************************-->



<!--*************************************START CENTER COLUMN ***********************************************-->



      <div id="midcol"><h2>The middle column</h2><p>And some text for the center column</p>



      </div>



<!--*************************************END CENTER COLUMN ***********************************************-->



<!--*************************************START RIGHT COLUMN ***********************************************-->



    <div id="rightcol"><h2>The right column</h2><p>And then again, some text for the right column</p>



</div>



<!--*************************************END RIGHT COLUMN ***********************************************-->



<hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />

<div id="footer">Footer</div>



</div>

<!--*************************************END MAIN CONTAINER ***********************************************-->

</body>

</html>

let’s analyze this: first of all, there’s something that jumps to the view at first sight: COMMENTS! . Yes, they jump to the view because I wanted that and because that’s what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well… you’re in the wrong business.

Then you have the header (with h1 tag) the cols (named in a way you’ll recognize what they are at first sight) and a footer. You’ll also see some “strange” code, and styled HR, but don’t worry, I’ll go to it later.

Once you have your html, you need to start define elements. I’ll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code:

Code:



* {margin:0px; padding:0px;}

body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}



#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}



#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}

#header h1{color:#fff; text-align:left;}



#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }

#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}

#midcol p{margin-bottom:10px;}

#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}



#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}

let’s go line by line (or 2 at most)

Code:



* {margin:0px; padding:0px;}

body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}

Nothing strange here, just defining the colors and font and reseting all margins and paddings

Code:



#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}

now, we add some flavor. Everything is quite straight, but we’ll use position:relative, z-index:1 and overflow:hidden. You won’t normally need them most of the times, but we need it for the 100% height columns and the footer.

Code:



#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}

#header h1{color:#fff; text-align:left;}

The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective.

LET’S GO WITH THE COLUMNS!!!!

Code:



#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }

#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}

#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}

The columns are extremely simple in their layout, but you’ll see those 4000px values and will ask yourself WTF! . That’s another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh? Everything else is just styling (width, bg, color, whatever)

and finally, the footer:

Code:



#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}

Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes “out of the box”. The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns.

Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely.

And that’s it! The “impossible to make” in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn!

Tutorial: Mobile tips and tricks

Harvey — Sun, 10 Jan 2010 19:16:16 +0000

Unless you live under a rock in another planet with no intelligent life, you must be aware by now that Mobile Content is the “next big thing”. There’s a lot to say about this conception, personally I find it very difficult to understand. While computer and TV screens are going bigger and bigger and then even bigger, mobile content is going a million steps back. Then again, many people, especially younger people mesmerized by “coolness” likes this way of content delivery, and there’s money to be made off. So… time for some Mobile issues.

First of all, if your site is well done, you won’t need many changes. When I say well done, I mean proper XHTML with both HTML and CSS validating. If you went with a cheap designer that provided some half made product… well, now you have to pay again for a whole new content delivery tour. If your designer used tables… well, whole new tour. If your designer can’t make proper CSS (even if validating), well… whole new tour. Take it as a learning, pay twice for the ‘cheapo’ (hopefully cheap) and continue reading.

Design for Mobile is a whole new different thing. it’s easy and simple but it has to be made TO THE “A”. Content organization and logical flow is key, and so is CSS. As you may imagine, there are not much options with mobile design since its screen doesn’t allow it. However, you can be as complex as you want. And…. fail. Mobile design is about simplicity, in essence it’s like 94/95′s design, only that without the tables.

Once you have a logical structure (you can draw it on paper or make a graph flow for visual help), you can apply the CSS. Personally, I’d use 3 or 4 style sheets and offer them as options. Since my html has to be PERFECT and I’ll use DIVs, I can change everything in a snap via CSS, hence your mobile customers will be able to choose whatever they like.

An idea for organization would be something like this:

the size of this screen is the one you should aim for since it’s the most common: 240×320. However, you can serve different style sheets and detect screen sizes or be smart and use liquid layouts. The choice is yours.

As you may see, this very basic design uses logical semantyc XHTML. It’s simple and to the point, yet it uses some content display that allows you to maximize content delivery using as little space as possible

Another thing to note: Don’t rely on fonts! NEVER! Most mobile devices won’t include any of the fonts you usually will rely on, like Times, Verdana and such. The user has to install them.

For devices using Windows Mobile, it’s a great idea to offer the fonts you want to display in your site so the user can download them.

Obviously, you can use something as Facelift, Flir, AnyFont, whatever, but it’s always a nice idea to deliver the regular fonts for your site as well.

So now we need to display content.

In adult business, you’ll want to display photos and videos rather than text. How to do it AND DO IT WELL is a very tricky question. Personally, I’d use any kind of tool based on JQuery or Prototype to build AJAX apps, but you can do it with php or simply with HTML. The better you do that, the better you’ll do with your mobile site. As a tip, think about this: most people doesn’t have an Iphone, yet everybody loves it. So… why not serve your site emulating Iphone? It’s relatively easy for someone that knows what is he/she doing, and your members will love the slick modern design

Finally, something so basic that it’s borderline ridiculous yet many people doesn’t do: add a bookmark link.

Of course there’s a lot more to mobile content delivery, but for now, I hope this helps to any one willing to enter this competitive market

Tutorial: Creating Rounded Corners with Pure CSS

Ed — Sun, 10 Jan 2010 18:50:12 +0000

For those looking for rounded corners for their designs, there’s a lot of techniques throughout the ages, so to say. At first, web designers started with tables, and the only resource was to make several cells to contain rounded corners images. Pretty hideous but it does the trick.

Now, with CSS you can make rounded corners by using only CSS and no images. You may ask yourself “what is this wacko talking about?” since there’s no rounded corners properties in CSS nor CSS2. So the wacko gives you a warm welcome to the kingdom of… CSS3!

Before going further, CSS3 isn’t “oficially” alive, however, a bunch of the new CSS3 properties are available in most browsers, so it’s quite safe to use them (we’ll go further on how to display CSS sheets depending on browsers).

One of the most sough after properties for web designers is the rounded corners property, since it’s one of the main components of so called web 2.0 design (as we’re at it, after 20+ years as a designer, I still have no idea what web 2.0 design is)

So, without further ado, let’s start with the tutorial:

First let’s add a div with any content you may want:

    This is the almighty content

Neat, huh? Unless you’re using a pseudo-browser, you should be seeing a pink box with all corners rounded. And this is the whole code used to create that

<div style="background:#f09;

width:300px;

padding:10px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;">

This is the almighty content

</div>

Let’s disect it: border-radius is the w3.org property, so if you want to validate your page, you’ll need it. Sincerely, as long as the design works, I couldn’t care less about validation. Most of the times, when you want to go “out of the box”, you’ll find a lot of trouble validating your CSS. But getting back to our subject, this property has propietary codes for different browsers, hence the remaining properties we have added

-moz-border-radius: it’s the Mozilla propietary implementation
-webkit-border-radius: it’s the Safari propietary implementation
-khtml-border-radius: it’s the Konqueror propietary implementation

Now, we’d bang our heads against the wall wondering why all these browsers can’t just use the w3.org implementation, but well, it’s the same old story. This being said, Opera and Mozilla announced their browsers will recognize all w3 implementations (Opera already does on most of them, including this one).

Now, what if we want different radii on different corners or even no radius on some corner? This will require slightly more code, but not that much. See it by yourself:

This is the almighty content

and the code to achieve this as follows:

-webkit-border-bottom-right-radius: 5px;

-khtml-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 5px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 5px “>This is the almighty content

As you can see, Firefox propietary implementation is more simple than all others since you can define all radii in a single declaration, where the radius values order is: top-left, top-right, bottom-left, bottom right. However, the w3 implementation is way more sophisticated, once all browsers recognize it, you’ll be able to do stuff like this:

Image taken from w3.org

So this is it, CSS corners for the masses!

Making CSS rounded borders in Internet Explorer

OK, first of all let’s clarify something:
a) IE is more a giant spyware machine with some browser capabilities than a real browser.
b) Most people uses IE.
c) Microsoft already announced they’ve no plans in the near future to be w3 compliant, much less CSS3 compliant.
hence d) you must work on an IE version like it or not.

Bummer. At this point, I’m all for letting IE users see the above boxes as simple squares, but well, we all know we want the design to be cross-browser compatible. There’s no way in hell or heaven that a compliant CSS2 layout will look the same in IE than in any other browser, so you need to do things different for IE. There are several ways, but the one I like is making a whole different style-sheet for IE7 and another for IE6. Nasty, but will save you a lot of time. To achieve this, you’ll need to add this code in your pages between the HEAD tags

That means: “if Greater or Equal to IE6, use style-IE.css” and same for IE7 . Want to cry? Although more compliant, you’ll probably need yet another style sheet for IE8!!! Personally, I don’t care anymore for IE6, you can’t even test it anymore since almighty Microsoft stopped supporting it. Why would I?

but… you know what? I’ll leave you here and hopefully you’ll visit us to find out how to make the dreaded rounded corners in Internet Explorer!