Du bist nicht angemeldet.

Anzeige

1

Dienstag, 20. August 2013, 15:37

Fragen rund um HTML & CSS

Da es kein Forum für Webdesign hier gibt eröffne ich mal den Thread unter dieser Kategorie.

Warum dieser Thread? Da ich weiss das es hier einige gibt die sich mit der Thematik hobbymässig und beruflich auseinander setzen und da ich ne Fräge hab und mich nicht stundenlang wieder im Netz dumm und dusselig suchen will :D .


Fräge: Wie verhält es sich denn nun mittlerweile mit den Gradienten.

Reicht es nun mittlerweile die vereinfachte Version mit linear-gradient zu schreiben?

background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,1) 100%);

Oder muss/sollte man es immer noch in der umständlichen Variante mit den Browserkürzeln schreiben?

background: rgb(0,0,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );


Ich hatte jetzt auf den 5 Browsern IE V9, Opera V12, FF V23, Chrome V28 und Safari V5 die einfache Version getestet, bei dem Safari unten durch viel und musste eins der beiden -webkit- mit integrieren. Gut ok hab ich halt 2 Zeilen Code, das nicht so wild als die 9 Zeilen.

Frage2 - Warum gibts für Safari eigentlich zwei Schreibvarianten die das gleiche Ergebnis ausspucken?

2

Dienstag, 20. August 2013, 16:02

Hi Adrian

Wenn ich könnte würde ich dir helfen, habe aber so gar keine Ahnung :huh: um was es geht. Musst du aber jetzt nicht erklären, geht nur darum das ich hier nicht schreiben kann und du dich deshalb nicht wundern sollst.
Liebe Grüße in die Ferne :wink:

Frechheit ist, anderen das zu sagen was sie nicht hören wollen ;)

cythux

Meister

  • »cythux« ist männlich

Beiträge: 1 101

Wohnort: Waimes

Beruf: PC und Netzwerktechniker, Freelancer demnächst

Skills: Fortgeschrittener

  • Private Nachricht senden

3

Dienstag, 20. August 2013, 16:08

Leider geht zur Zeit leider nur so
IE9 beherrscht keine Verläufe, IE10 dagegen schon

http://lea.verou.me/css3-workshop-mobilede/#cover
http://leaverou.github.io/prefixfree/ du kannst jedoch dies hier benutzen

http://www.colorzilla.com/gradient-editor/ sieht PS mässig aus

und aus diesem Grund gibt es 2 Varianten für safari
http://maddesigns.de/webkit-andert-css3-…syntax-739.html
http://www.broken-links.com/2009/11/26/c…lla-and-webkit/
http://www.broken-links.com/2009/11/30/c…-webkit-part-2/


Alternative wäre nur die möglich mit einem Preprocessor wie zb Less, Sass, Compass
Kein Support oder Fragen zu Photoshop via PM,
dafür ist das Forum da.

4

Dienstag, 20. August 2013, 16:31

Ja IE9 bin ich gerade selber überrascht der nimmt ja komischer Weise den einfachen Code ohne Filter ohne SVG Grafik an. Ich dachte nämlich das ich den IE10 drauf hatte und wollte den IE9 installieren als mir mein System sagte das der IE9 bereits installiert ist. ?( Ich musste nicht mal diese Fallback Lösung für den IE9 einbauen die Collorzilla auspuckt

So wie ich es geschrieben hab nix weiter -> background: linear-gradient(to bottom, rgba(20,19,17,1) 0%,rgba(26,24,22,1) 80%,rgba(51,48,43,1) 100%); funtzt 100%ig.

Ich benutz generell den Verlaufsgenerator von Collorzilla Cythux, aber trotzdem danke.

Wegen der Frage 2 - Achsoooo, dann brauch ich ja trotzdem nur 2 Zeilen schreiben. Weil wie schon geschrieben die vom W3C benutze WorkingDraft Schreibweise funktioniert ja auf allen Browsern ausser bei Safari. Wie es sich jetzt allerdings bei Smartphones und Tablets verhält weiss ich nicht aber eigentlich sollten da die Browser ja genauso codiert sein und das unterstüzen.

cythux

Meister

  • »cythux« ist männlich

Beiträge: 1 101

Wohnort: Waimes

Beruf: PC und Netzwerktechniker, Freelancer demnächst

Skills: Fortgeschrittener

  • Private Nachricht senden

5

Dienstag, 20. August 2013, 16:53

Bei den Mobilen Endgeräten wird das ja via Mediaqueries eingebunden, da muss eventuell den code auch hinsetzen und wegen der Retina mist.

Bei der PS CC Version gibt es ja auch CSS Style kopieren den kann man dann im Editor einfügen, ob es das bei PS CS6 schon gab weiss ich nicht

Beispiel http://css3.ps/?=F73F0489-5E29-799D-173F-9C31642619AD oder dieses Plugin nutzen von http://css3ps.com/

Und so sieht die Variante unter CC aus vom Code

Cascading Style Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.Rounded_Rectangle_1 {
  border-width: 3px;
  border-color: rgb( 136, 136, 136 );
  border-style: solid;
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(10,221,246) 0%, rgb(68,139,138) 46%, rgb(12,223,248) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(10,221,246) 0%, rgb(68,139,138) 46%, rgb(12,223,248) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(10,221,246) 0%, rgb(68,139,138) 46%, rgb(12,223,248) 100%);
  position: absolute;
  left: 159px;
  top: 181px;
  width: 194px;
  height: 74px;
  z-index: 1;
}


Das ist dann Ergebnis davon
»cythux« hat folgendes Bild angehängt:
  • Untitled-1.png
Kein Support oder Fragen zu Photoshop via PM,
dafür ist das Forum da.

Ähnliche Themen