Ausgabe
Der Designer, mit dem ich arbeite, hat mir ein Monster von einem Implementierungsproblem gegeben …
Der Seitenhintergrund ist grau, und darüber befindet sich eine zerknitterte Papierstruktur (sich nicht wiederholend mit gemalten Designelementen) für die ersten 600 Pixel (mit 1400 Pixeln im Durchmesser; derzeit zentriert als sich nicht wiederholender Hintergrund). Unten befindet sich ein weiteres Div mit mehr Text – mit einem Schlagschatten, einem komplexen Linienmuster für den Hintergrund und zerrissenen Kanten , das leicht über dem oberen Div schwebt.
- Das Speichern des oberen Teils als JPG und des unteren Teils als transparentes PNG führt zu Dateigrößen von +1mb.
- Das Speichern des oberen Teils als JPG und des unteren Teils als JPG funktioniert aufgrund des Schlagschattens nicht sehr gut. Es würde technisch funktionieren, den unteren Teil als Slice mit Elementen des oberen Teils unter dem Schlagschatten zu speichern, aber es müsste immer pixelgenau ausgerichtet sein, sonst sieht es beschissen aus. Und an diesem Punkt könnte ich genauso gut die ganze Seite als ein großes Bild speichern …
- Wenn der untere Teil eine Volltonfarbe für den Hintergrund hätte, könnte ich jeden Rand so einstellen, dass er ein anderes transparentes PNG hat. Das Linienmuster auf dem unteren Teil bedeutet jedoch, dass dies nicht funktionieren würde.
Meine Frage ist letztendlich:
Wie zum Teufel machen die Leute heutzutage Ripped Edges, ohne ihre Website zu einem großen Bild zu machen?
Vielen Dank!
Screenshot:
Lösung
CSS3 stellt eine border-imageEigenschaft zur Verfügung, die Ihnen beim Effekt des zerrissenen Rahmens helfen sollte (obwohl es selbst dann hilfreich wäre, wenn es sich um ein sich wiederholendes Bild handeln würde).
Siehe hier für die W3-Spezifikation .
Es wird Ihnen jedoch möglicherweise nicht viel nützen, da die Browserunterstützung für diese Funktion nicht großartig ist – IE unterstützt sie überhaupt nicht (nicht einmal IE9), und obwohl die meisten anderen Browser sie unterstützen, haben sie derzeit alle Lücken in ihrer Unterstützung und erfordern ein Herstellerpräfix in der CSS-Eigenschaft.
Siehe CanIUse.com für eine vollständige Browser-Unterstützungstabelle dafür.
Um ehrlich zu sein, denke ich, dass Sie einfach zu Ihrem Designer zurückkehren und ihn bitten sollten, die Arbeit mit ihm zu vereinfachen – er hat wahrscheinlich nur etwas entworfen, von dem er denkt, dass es gut aussieht, aber er ist sich der Grenzen des Designs, das er zusammengestellt hat, nicht bewusst; Wenn Sie ihm das Problem erklären, kann er möglicherweise etwas Brauchbareres für Sie produzieren.
Beantwortet von – Spudley
Antwort geprüft von – Gilberto Lyons (FixError Admin)
