Konvertieren von Photoshop-Schatten in den CSS3-Schatten

8

Wenn ich einen Photoshop-Schlagschatten mit den folgenden Einstellungen habe

Mischmodus - rgb (0,0,0) / Opazität - 25% / Winkel - 135 Grad / Entfernung 4px / Spread - 0% / Größe - 4px

Wie kann ich meinen CSS3-Box-Schatten so einstellen, dass er meinem Photoshop-Design entspricht?

    
styler 24.02.2012, 10:00
quelle

5 Antworten

3

Diese CSS-Klasse wird für verschiedene Webbrowser in einer Regel ohne Transparenz gesammelt (bekannte Unterstützung: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9 +):

%Vor%

... und diese CSS-Klasse unterstützt die Transparenz:

%Vor%     
bodi0 27.03.2012, 08:07
quelle
20

Ich schrieb einen Artikel über die Konvertierung von Photoshop Drop Shadow-Eigenschaften in einen CSS3-Box-Shadow . Wenn Sie Sass / Compass verwenden, können Sie das Photoshop-Schlagschatten-Kompass-Plugin verwenden. Wenn Sie die Mathematik selbst machen wollen, ist es nicht besonders schwierig, unten ist ein einfaches Beispiel in JavaScript geschrieben. Die zwei kniffligen Teile konvertieren den Winkel in X- und Y-Offsets und konvertieren den Spread-Prozentsatz in einen Spread-Radius.

%Vor%     
Grady Kuhnline 09.05.2012 00:11
quelle
0

Ich hatte ein Skript geschrieben, das Layer-Effekte als CSS-String in die Zwischenablage kopiert, zusammen mit dem Standard-Kopieren von Layer-Effekten. Es ist ein bisschen roh, aber es funktioniert. Ссылка

    
Dmitry_F 12.10.2012 22:45
quelle
0

Ich benutze ein Tool namens psd to css3, Sie müssen nur Werte aus Photoshop hinzufügen und Sie sind fertig mit diesem Link Ссылка

%Vor%     
yashodhan 01.04.2014 15:32
quelle
0

Hier ist ein nettes Tool, das keine Programmierung erfordert und Photoshop-CSS-Boxen erstellt: Ссылка

    
Adam 02.05.2014 06:25
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Warum bekomme ich "_OBJC_CLASS_ $ ..., referenziert von:" linker error, wenn ich Frameworks korrekt verlinkt habe?