Some nice CSS3 snippets for every day work …

rounded corners:  border-radius

-moz-border-radius: 5px;
border-radius: 5px;

prefix is only necessary for mozilla!

reference:

border-radius
-moz-border-radius
border-top-left-radius
-moz-border-radius-topleft
border-top-right-radius
-moz-border-radius-topright
border-bottom-right-radius
-moz-border-radius-bottomright
border-bottom-left-radius
-moz-border-radius-bottomleft

more border-radius

linear gradients

/* Firefox 3.6 */
-moz-linear-gradient(top, #ddd, #fff);
/* Safari & Chrome */
-webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #ddd));
/* IE6 & IE7 */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ddd',
endColorstr='#fff');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ddd',
endColorstr='#fff')";

more gradients 1
more gradients 2
more gradients 3 (generator)

box-shadow:

/*Schlagschatten*/
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;

/*inner shadow */
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;

more box-shadow

text-shadow:

text-shadow: 2px 2px 2px #000;

and for our best friend -> internet explorer some nice workarounds

Related posts:

1. CSS border-bottom for IE 6
2. mixed TypoScript Snippets Vol. 2
3. How to … style the dotted link border in Firefox

show restricted Pages & add css (class=”locked”)

make restricted pages visible for all, but not accessible

# 11 = Page with Login Plugin
config.typolinkLinkAccessRestrictedPages = 11
config.typolinkLinkAccessRestrictedPages_addParams = &referer=###RETURN_URL###

#for the menu
lib.menu.1 {
 showAccessRestrictedPages = NONE
 showAccessRestrictedPages.addParams = &redirect_url=###RETURN_URL###
}

now, add some class or attributes to the restricted pages

[usergroup = *]
# after login
...
[else]
#without login
...
lib.menu.1.NO = 1
lib.menu.1.NO.ATagParams.if {
         value=0
         isGreaterThan.field = fe_group
     }
lib.menu.1.NO.ATagParams = class="locked"
lib.menu.1.IFSUB = 1
lib.menu.1.IFSUB.ATagParams.if {
         value=0
        isGreaterThan.field = fe_group
     }
lib.menu.1.IFSUB.ATagParams = class="locked"
[end]

hard to find the right solution, i spent several hours for this snippets – so have fun!

Related posts:

1. mixed TYPO3 & TypoScript Snippets Vol. 3
2. mixed TypoScript Snippets Vol. 2
3. How to – redirect restricted TYPO3 pages to loginform and back

One more snippet …

I hab trouble with transparency backgrounds and the different Browser interpretation, ahhrgh. But finally i found a cool summary.

take this:

div .test {
   background: rgb(255, 255, 255); /* fallback for all old guys */
   background: rgba(2255, 255, 255, 0.5);
}

Internet Explorer need a special treatment, via conditional comment

<!--[if lt IE 9]>
div .test {background:#fff; filter:alpha(opacity=50);}
<![endif]-->

Thats all. Enjoy it.

Related posts:

1. jQuery badBrowser Update Version 1.4
2. CSS: center background image in Firefox & Co.
3. CSS border-bottom for IE 6

To center a background image vertical and horizontal especially Mozilla Firefox need the attribute “fixed”:

body {
background-image: url(....);
background-position: center center;
background-attachment: fixed;
height: 100%;
}

Tested with: IE 6 – 8, Firefox 3.6, Safari 4

With this little trick, my day will be fine! Ole.

Related posts:

1. How to … center a YAML Layout
2. How to … style the dotted link border in Firefox
3. How to add german Amazon.de OpenSearch Plugin to Firefox 3.5 on Ubuntu 9.1

I had the problem, that the 2nd div-container (which is a fold-out CSS-menu) is larger than the sorrounding div. In IE 7 the CSS-menu lays, in the part outside the sorrounding container, behind those elements. But for a menu you aspect to be the first element in the hierarchy.

Those layer positions can be set using z-index in CSS. The higher the index, the higher the position of the element to users-view. So I set the z-index to a high value but in IE 7 nothing happened.

After trying a while I worked out a very easy solution. If you use for an element the position-absolute attribute it will be set out of the normal element-flow of the website and be positioned absolute to the given position. But IE 7 inherits the value from the parent-element (here the sorrounding div-container) which had no z-index.

So my solution is to give both, the surrounding and the inner div-container a z-index. The surrounding container gets (in my case) a higher z-index than the surrounding one and the problem is fixed!

The surrounding element is the YAML #topnav-element and the inner one is a div-container with list-items which are styled as a JS-free fully CSS-menu.

#topnav {
  overflow:visible;
  z-index:5;
  position:absolute;
  [...]
}

#inner_container {
  position:absolute;
  z-index:2;
  [...]
}

Related posts:

1. overflow:auto – Internet Explorer 6 Bug
2. How to code a jQuery slider menu
3. How to … center a YAML Layout

I show you a nice jQuery snippet for a smoothy slider menu.

This was my first jQuery experience – if you find some tuning options, tell me please!

Here you can see my script in Action: http://www.gyn-endoskopie.de/

/**
 * @author team noir GbR
 * simple slide-out Menu
 * www.gyn-endoskopie.de
 * Version 1.5 - 11.01.2010
 */
$(document).ready(function() {
 //on first loading, hide the submenu
 $(".subul li").hide();
 //show active sub element, after paging
 $(".active").parent().parent(".subul").css('margin-top', -4).children("li").show(".subul li");

 //Actionhandling
 //click on menu
 $(".slide").click(function(){

 //only one submenu is allowed to show
 $(".angeklickt li").slideUp("fast");
 $(".angeklickt").removeClass("angeklickt");
 //close other open submenus
 $(".active").parent().parent(".subul").children("li").slideUp(".subul li");

 //mark heading ul
 $(this).next("ul").addClass('angeklickt');

 //show marked submenu
 if ($(".angeklickt li").is(":hidden")) {
 $(".angeklickt li").slideDown("slow");
 $("ul.angeklickt").css('margin-top', -4);
 return false;
 }
 //close/slide submenu
 else {
 $(".angeklickt li").slideUp("slow");
 $("ul.angeklickt").css('margin-top', 0);
 $(this).next("ul").removeClass("angeklickt");
 return false;
 }
 });

});

this is the menu source code:

<div>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Zur Person</a></li>
<li><a href="#l">Operationen</a>
 <ul class="subul>
   <li><a href="#" title="Operationsspektrum">Operationsspektrum</a></li>
   <li><a href="#" title="OP-Aufklärung">OP-Aufklärung</a></li>
   <li><a href="#" title="OP-Patienteninfos">OP-Patienteninfos</a></li>
   <li><a href="#" title="Anmeldung">Anmeldung</a></li>
 <li><a href="#" title="Novasure/Goldnetz">Novasure/Goldnetz</a></li>
 </ul>
</li>
<li><a href="#" title="Tagesklinik">Tagesklinik</a></li>
<li><a href="#">Kontakt</a>
 <ul class="subul>
   <li><a href="#" title="Schreiben Sie uns">Schreiben Sie uns</a></li>
   <li><a href="#" title="Anfahrt mit dem Auto">Anfahrt mit dem Auto</a></li>
   <li><a href="#" title="Wegbeschreibung">Wegbeschreibung</a></li>
 </ul>
</li>
</ul>
</div>

System information:

• TYPO3 4 CMS
• YAML 3.1
• CSS 2/3
• XHTML 1.0
• http://www.gyn-endoskopie.de/

greetz!

Related posts:

1. How to … integrate a YAML Menu to TYPO3
2. How to use position-absolute and z-index with Internet Explorer 7 and nested containers
3. How to build a YAML fullscreen layout

Yaml provides a nice solution for column layout, center layout and fullscreen layout.

The last team-noir project was a fullscreen-design for our customer. I show you how easy it is to code such a template:

Dirk Jesse wrote a very good documentation:

Variations of the Markup

As demonstrated, the two CSS classes  .page_margins and .page control the basic appearance of the layout, by setting the total width as well as margins, borders, or backgrounds if necessary.

In the source code described above, the outermost DIV container .page_margins surrounds all the other elements of the webpage. This results in a layout which in its simplest form is a rectangular box against the background of the <body> element. This effect is not always desirable.

So the main ascpect is to order your source by:

<div id="header / col1 / ...">
    <div class="page_margins">
      <div class="page">
         ...
      </div>
    </div>
</div> 

modify the basemod.css:

/* (en) Centering layout in old IE-versions */
 body { text-align:center; }
 .page_margins { text-align:left; margin:0 auto; }

 /* (en) Layout:width, background, borders */
 .page_margins { width: 100%; background: transparent; }

Example on Yaml.de, and here

So as you can see – really easy coding -> thank’s to Dirk Jesse!

Related posts:

1. How to … center a YAML Layout
2. Using YAML and be fully variable
3. CSS: center background image in Firefox & Co.

But sometimes, maybe when you are at work, it is not that easy. Sometimes you need a little work around or a special CSS only for IE 6. Today it was one of those days. At work I made a site were articles are shown in a list, only one little overview-snippet for each article. Now I want, to made it more clearly arranged a solid line between each div-container. Thought and done in CSS, it worked fine – in Firefox. But not for Internet Explorer 6.

But after a little internet search I found a very easy to use solution: you have to put a margin-bottom also in your CSS-class and than IE 6 let the line appear.

This is my class.

.my_class {
   padding: 10px;
   border-bottom: 1px solid #999;
   margin-bottom: 1px; /* needed to show the border also in IE 6 */
   min-height: 190px;
}

Related posts:

1. css3 snippets for every day: border-radius, gradient, shadow, …
2. Floating problems with IE 6
3. CSS floating problems

new Aptana Studio IDE is available.

I have just downloaded the .exe file. Let’s see whats new …

greetz, Martin

Related posts:

1. Aptana Studio 2.0 under Ubuntu 9.10
2. Aptana IDE Webdevelopment

The solution of this problem, just set the floating boxes with inline-attribute, works also for this right-floating problem. Just set for the CSS-id the following:

display: inline;

See the pictures below. The left one is with bug, the right one without. Hope this helps some others.

Related posts:

1. CSS floating problems