Dez 15 2010

CSS: Transparenz mit CSS

By Fredyy and has no comments yet.

Hi,

leider gibt es noch einen standardisierten Befehl für Transparenz in CSS2, jedoch ist es trotzdem möglich Transparenz zu nutzen, auch Browser übergreifend, wenn man alle verschiedenen Befehle verwendet.

Der Code:

<html>
  <head>
  <title>Tranparenz</title>
  <style type="text/css"><!--
   .transparenz{
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }
  .beispielbox{
    border: 1px solid black;
    background-color: #666666;
    color: #9F9F9F;
    padding: 10px;
    margin: 10px;
  }
  //--></style>

  </head>
  <body>
  <div class="beispielbox tranparenz">
  <p>Lorem ipsum dolor sit amet consectetuer nunc molestie id convallis elit. Ut massa Lorem vitae Quisque ipsum enim nec elit felis In. Vitae Nulla leo eros fringilla tempus nibh pulvinar Sed libero Curabitur. Urna augue ac libero Curabitur cursus laoreet sapien wisi a tempus. Gravida nibh et velit velit neque Nulla malesuada fames metus.</p>
  </div>

  </body>
</html>

So siehts aus:

50% Transparent

Lorem ipsum dolor sit amet consectetuer nunc molestie id convallis elit. Ut massa Lorem vitae Quisque ipsum enim nec elit felis In. Vitae Nulla leo eros fringilla tempus nibh pulvinar Sed libero Curabitur. Urna augue ac libero Curabitur cursus laoreet sapien wisi a tempus. Gravida nibh et velit velit neque Nulla malesuada fames metus.

nicht Transparent

Lorem ipsum dolor sit amet consectetuer nunc molestie id convallis elit. Ut massa Lorem vitae Quisque ipsum enim nec elit felis In. Vitae Nulla leo eros fringilla tempus nibh pulvinar Sed libero Curabitur. Urna augue ac libero Curabitur cursus laoreet sapien wisi a tempus. Gravida nibh et velit velit neque Nulla malesuada fames metus.

Das ganze lässt sich wunderbar mit den Runde Ecken per CSS erweitern.

Gruß,
Fredyy

Kategorien: CSS, Tutorials
tags: , ,
Nov 30 2010

jQuery: externe Links kennzeichnen und in neuem Fenster öffnen

By Fredyy and has 2 comments.

Hi,

da das früher häufig genutzte target=”_Blank” in keiner einigermaßen zeitgemäßen HTML Spezifikation vorkommt hat man häufig das Problem, dass externe Links sich im selben Fenster öffnen und der Besucher ihrer Homepage, sie ganz verlässt.

Doch danke jQuery gibt es eine Möglichkeit, ihren Quelltext valide zu lassen und trotzdem externe Links in einem neuen Fenster zu öffnen und gleichzeitig alle externen Links zu kennzeichnen.

Erklärung:
Externe Links werden automatisch mit einem target=”_blank” und der CSS-Klasse “extern” versehen. Dabei wird über einen Attribut-Selektor gefiltert, ob der Link mit dem http:// Prefix versehen ist. Zusätzlich wird über den :not – Selektor die eigene Domain von der Regel ausgenommen.

$(function () {
    $('a[href~="http://"]:not([href~="http://www.fredyy.de/"])').attr({target: "_blank"}).addClass("extern");
});

a.extern {
    padding-right: 10px;
    background: url(linkout.gif) no-repeat 100% 50%;
}

Auf meiner Homepage, wo ich Hilfe bei PC Problemen und Ähnliches anbiete könnt ihr euch das Skript in Aktion ansehen.

Gruß,
Fredyy

Kategorien: CSS, jQuery, Tutorials
tags: , , ,
Nov 30 2010

Runde Ecken per CSS ohne Grafiken

By Fredyy and has 3 comments.

Hi,

Viele Fragen sich immer noch, wie man per CSS Ecken von Div containern und Ähnlichem abrunden kann, ohne dafür entsprechende Hintergrundbilder zu benutzen.
Viele Browser unterstützen dies bereit, jedoch gibt es dafür noch keinen standartisierten Befehl, deshalb muss man um alle Browser abzudecken 4 verschiedene Aufrufe nutzen, wie ihr im Beispiel sehen könnt:

<html>
  <head>
  <title>runde Ecken</title>
  <style type="text/css"><!--
   .rundeecken{
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px
  }
  .beispielbox{
    border: 1px solid black;
    background-color: #666666;
    color: #9F9F9F;
    padding: 10px;
    margin: 10px;
  }
  //--></style>

  </head>
  <body>
  <div class="beispielbox rundeecken">
  <p>Lorem ipsum dolor sit amet consectetuer nunc molestie id convallis elit. Ut massa Lorem vitae Quisque ipsum enim nec elit felis In. Vitae Nulla leo eros fringilla tempus nibh pulvinar Sed libero Curabitur. Urna augue ac libero Curabitur cursus laoreet sapien wisi a tempus. Gravida nibh et velit velit neque Nulla malesuada fames metus.</p>
  </div>

  </body>
</html>


Das ganze sieht dann so aus:

Lorem ipsum dolor sit amet consectetuer nunc molestie id convallis elit. Ut massa Lorem vitae Quisque ipsum enim nec elit felis In. Vitae Nulla leo eros fringilla tempus nibh pulvinar Sed libero Curabitur. Urna augue ac libero Curabitur cursus laoreet sapien wisi a tempus. Gravida nibh et velit velit neque Nulla malesuada fames metus.

Viel Spaß & Gruß,
Fredyy

Kategorien: CSS, Tutorials
tags: , ,
Nov 25 2010

Gepunktete Rahmen um Links in Firefox entfernen

By Fredyy and has 1 comment.

Gepunktete Rahmen tauchen u.a. im Firefox auf wenn ein Link aktiv ist bzw. angeklickt wurde.

So kann man den Rahmen per CSS entfernen: 

a:active, a:focus { outline: none; }

dabei gilt zu beachten, dass dies als optischer Hinweis gedacht ist,
wenn ein User per TAB-Taste o.ä. durch die Seite navigiert. Dieser Hinweis entfällt in diesem Fall leider auch.

Kategorien: CSS, Tutorials
tags: , ,