Blocomo

Domainverkauf: nasty.com (200.000 USD)

Christopher Bergmann — Sun, 12 May 2013 16:52:31 +0000

Die Domain nasty.com (nasty (engl.) = gemein, böse) wurde für 200.000 USD verkauft, wie der nachfolgende Screenshot der “Verkaufte Domains”-Box von Sedo zeigt:

Quelle: Eigener Screenshot von sedo.de

Domainverkauf: familyinsurance.com (57.000 USD)

Christopher Bergmann — Sun, 12 May 2013 16:10:33 +0000

Mit dem Verkauf der Domain familyinsurance.com (family insurance (engl.) = Familienversicherung) für 57.000 USD hat ein weiterer bemerkenswerter Domainverkauf stattgefunden. Quelle ist wie immer die “Verkaufte Domains”-Box von Sedo:

Quelle: Eigener Screenshot von sedo.de

Domainverkauf: moms.com (252.000 USD)

Christopher Bergmann — Wed, 08 May 2013 09:15:09 +0000

In der “Verkaufte Domains”-Box auf der Sedo-Webseite wurde mit dem Verkauf der Domain moms.com ein weiterer, beachtlicher Domainverkauf veröffentlicht: Wie der nachfolgende Screenshot zeigt, wurde die Domain für den sechsstelligen Betrag von 252.000 USD verkauft.

Quelle: Eigener Screenshot von sedo.de

Domainverkauf: gold.co.uk (42.050 GBP)

Christopher Bergmann — Wed, 08 May 2013 08:58:42 +0000

Die Exact-Match Domain (EMD) gold.co.uk wurde, wie der nachfolgende Screenshot zeigt, für 42.050 GBP verkauft.

Quelle: Eigener Screenshot von sedo.de

Webdesign des Tages #21

Christopher Bergmann — Tue, 07 May 2013 14:05:20 +0000

Light And Shadows

Domainverkauf: kurzreise.de (33.320 EUR)

Christopher Bergmann — Tue, 07 May 2013 12:57:23 +0000

Über Sedo hat ein weiterer, bemerkenswerter Domainverkauf stattgefunden, wie der nachfolgende Screenshot von der “Verkaufte Domains”-Box auf der Sedo-Webseite zeigt. Demnach wurde die Domain kurzreise.de für 33.320 EUR verkauft.

Quelle: Eigener Screenshot von sedo.de

CSS: Mit transform: translate Objekte verschieben

Christopher Bergmann — Mon, 06 May 2013 11:47:23 +0000

Die Eigenschaft transform: translate ermöglicht es, Objekte zu verschieben. Dabei ist es mit transform: translateX möglich Objekte auf der X-Achse zu verschieben, mit transform: translateY lassen sich Objekte auf der Y-Achse verschieben. Wer sich bisher noch nicht so wirklich etwas unter der Eigenschaft vorstellen kann, kommt mit folgender Beschreibung möglicherweise besser zurecht: Die CSS-Eigenschaft transform: translate ermöglicht beispielsweise das “Hereingleiten” oder “Hereinfliegen” von Objekten, wie beispielsweise Bildern oder Texten, beim Überfahren eines Elements mit der Maus. Die nachfolgenden Beispiele zeigen beide Möglichkeiten, sowohl eine Verschiebung eines Objekts auf der X-Achse, als auch auf der Y-Achse. Darüber hinaus zeigt Beispiel 3, wie man durch das Hinzufügen einer Transparenz einen weiteren interessanten Effekt erzielen kann.

Beispiel 1: Verschieben von Objekten auf der X-Achse

Beispiel transform: translateX
Verschieben von Objekten auf der X-Achse.

Code für Beispiel 1:




Beispiel transform: translateX

Verschieben von Objekten auf der X-Achse.

#translatex-beispiel {
position: relative;
width: 448px;
height: 336px;
overflow: hidden;
border: 4px solid #aaa;
}

#translatex-beispiel img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
border-radius: 0;
}

#translatex-beispiel #translatex-beispiel-text {
background-color: #ccc;
-webkit-transform: translateX(-448px);
-moz-transform: translateX(-448px);
-o-transform: translateX(-448px);
-ms-transform: translateX(-448px);
transform: translateX(-448px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
display: inline-block;
position: absolute;
top: 0;
width: 408px;
height: 336px;
padding: 20px;
}

#translatex-beispiel:hover #translatex-beispiel-text {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}

#translatex-beispiel:hover img {
-webkit-transform: translateX(448px);
-moz-transform: translateX(448px);
-o-transform: translateX(448px);
-ms-transform: translateX(448px);
transform: translateX(448px);
}

Beispiel 2: Verschieben von Objekten auf der Y-Achse

Beispiel transform: translateY

Verschieben von Objekten auf der Y-Achse.

Code für Beispiel 2:




Beispiel transform: translateY

Verschieben von Objekten auf der Y-Achse.

#translatey-beispiel {
position: relative;
width: 448px;
height: 336px;
overflow: hidden;
border: 4px solid #aaa;
}

#translatey-beispiel img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
border-radius: 0;
}

#translatey-beispiel #translatey-beispiel-text {
background-color: #ccc;
-webkit-transform: translateY(-336px);
-moz-transform: translateY(-336px);
-o-transform: translateY(-336px);
-ms-transform: translateY(-336px);
transform: translateY(-336px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
display: inline-block;
position: absolute;
top: 0;
width: 448px;
height: 296px;
padding: 20px;
}

#translatey-beispiel:hover #translatey-beispiel-text {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}

#translatey-beispiel:hover img {
-webkit-transform: translateY(336px);
-moz-transform: translateY(336px);
-o-transform: translateY(336px);
-ms-transform: translateY(336px);
transform: translateY(336px);
}

Beispiel 3: Verschieben von Objekten auf der X-Achse mit Transparenz

Beispiel transform: translateX

Verschieben von Objekten auf der X-Achse mit Transparenz.

Code für Beispiel 3:




Beispiel transform: translateX

Verschieben von Objekten auf der X-Achse mit Transparenz.

#translatex-beispiel-transparenz {
position: relative;
width: 448px;
height: 336px;
overflow: hidden;
border: 4px solid #aaa;
}

#translatex-beispiel-transparenz img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
border-radius: 0;
}

#translatex-beispiel-transparenz
#translatex-beispiel-text-transparenz {
background-color: #ccc;
-webkit-transform: translate(448px, 150px);
-moz-transform: translate(448px, 150px);
-o-transform: translate(448px, 150px);
-ms-transform: translate(448px, 150px);
transform: translate(448px, 150px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
display: inline-block;
position: absolute;
top: 0;
width: 408px;
height: 336px;
padding: 20px;
}

#translatex-beispiel-transparenz:hover
#translatex-beispiel-text-transparenz {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}

#translatex-beispiel-transparenz:hover img {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}

Domainverkauf: evora.com (94.000 USD)

Christopher Bergmann — Fri, 03 May 2013 20:09:04 +0000

Wie der nachfolgende Screenshot zeigt, wurde die Domain evora.com für 94.000 USD verkauft.

Quelle: Eigener Screenshot von sedo.de

Domainverkauf: kbra.com (40.000 USD)

Christopher Bergmann — Fri, 03 May 2013 07:42:18 +0000

Die Domain kbra.com wurde, wie die nachfolgende Abbildung zeigt, für 40.000 USD verkauft.

Quelle: Eigener Screenshot von sedo.de

CSS: Border

Christopher Bergmann — Thu, 02 May 2013 16:51:18 +0000

Mithilfe der CSS-Eigenschaft border lassen sich Elemente mit einem Rahmen versehen. Rahmen (engl. = border) eignen sich beispielsweise, um Elemente voneinander abzugrenzen oder bestimmte Bereiche besonders hervorzuheben. Die nachfolgenden Beispiele zeigen einige Gestaltungsmöglichkeiten für CSS-Rahmen.

Beispiel 1: Einfacher Rahmen mit CSS


1px starker, dunkelroter Rahmen

#css-border-beispiel{
border: 1px solid #c00000;
}

Ergebnis Beispiel 1:

1px starker, dunkelroter Rahmen

Beispiel 2: 4px starker Rahmen, unterschiedliche Border-Styles


4px starker, dunkelroter Rahmen, unterschiedliche Border-Styles

#css-border-beispiel{
border-top: 4px double #c00000;
border-left: 4px solid #c00000;
border-right: 4px solid #c00000;
border-bottom: 4px double #c00000;
}

Ergebnis Beispiel 2:

4px starker, dunkelroter Rahmen, unterschiedliche Border-Styles

Beispiel 3: 3D-”inset-border”

3D-"inset-border"

#css-border-beispiel{
border: 4px inset #c00000;
}

Ergebnis Beispiel 3:

3D-”inset-border”

Beispiel 4: 3D-”outset-border”

3D-"outset-border"

#css-border-beispiel{
border: 4px outset #c00000;
}

Ergebnis Beispiel 4:

3D-”outset-border”

Beispiel 5: 3D-”ridge-border”

3D-"ridge-border"

#css-border-beispiel{
border: 4px ridge #c00000;
}

Ergebnis Beispiel 5:

3D-”ridge-border”

Beispiel 6: 3D-”groove-border”

3D-"groove-border"

#css-border-beispiel6{
border: 4px groove #c00000;
}

Ergebnis Beispiel 6:

3D-”groove-border”

Beispiel 7: “dotted-border” und “dashed-border”


"dotted-border" und "dashed-border"

#css-border-beispiel{
border-top: 2px dashed #c00000;
border-left: 2px dotted #c00000;
border-right: 2px dotted #c00000;
border-bottom: 2px dashed #c00000;
}

Ergebnis Beispiel 7:

“dotted-border” und “dashed-border”

Beispiel 8: Einseitiger Rahmen


Einseitiger Rahmen

#css-border-beispiel{
border-left: 5px solid #c00000;
}

Ergebnis Beispiel 8:

Einseitiger Rahmen