Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise - Bilder mit Schatten
#1
Hallo zusammen,

ist es bei Mobirise auch möglich, ähnlich wie in NOF Bilder per CSS mit Schatten und runden Ecken zu versehen? In der SuFu habe ich leider nichts dazu finden können.

Vielen Dank und schönen Samstagabend.

Dagmar
Laborbeagle Balu
Balu - verstorben am 23.05.2013
Bonnie - verstorben am 07.03.2018
-----------------
NOF 15
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Wenn Du den (kostenpflichtigen) Code-Editor hast, hast Du per CSS alle Gestaltungsmöglichkeiten.
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Den habe ich, weiß aber nicht, was ich als entsprechendes CSS einfügen soll.  Undecided
Bei NOF mußte ich ja nur ein paar Zahlen einfügen...
Laborbeagle Balu
Balu - verstorben am 23.05.2013
Bonnie - verstorben am 07.03.2018
-----------------
NOF 15
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Schatten:
https://www.w3schools.com/css/css3_shadows.asp
Runde Ecken:
https://www.w3schools.com/css/css3_borders.asp
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
... gucke mal, hier habe ich einem Bild (Enten) runde Ecken und einen Schatten verpasst:

http://www.mobirise-tutorials.com/Fotos....ontent1-a2

Dazu habe ich einem <div> die id="myImage" im Code-Editor gegeben:

Code:
<!-- Beginn Bild mittels Code-Editor eingefügt -->
<div align="center" id="myImage">
   <img src="http://www.mobirise-tutorials.com/assets/images/enten-960x305.jpg" alt="Bild" title="Enten">
</div>
<!-- Ende Bild mittels Code-Editor eingefügt -->

... und dann diese CSS in den CSS-Editor (die sich dann nur auf diese ID in diesem Block bezieht) gegeben (für das "img" Tag):

Code:
#myImage img {
   border-radius: 30px;
   box-shadow: 5px 5px 5px #000000;
   max-width: 95%;
}

... und fertig.


.jpg  Bild-Eigene-CSS.JPG (Größe: 138,13 KB / Downloads: 20)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Vielen Dank für Eure Rückmeldungen; werde ich alles morgen austesten.
Nee, heute; ist ja schon nach 0 Uhr.
Laborbeagle Balu
Balu - verstorben am 23.05.2013
Bonnie - verstorben am 07.03.2018
-----------------
NOF 15
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Es ließ mir keine Ruhe und ich hab's getestet. Grundsätzlich klappt es auch, allerdings ist der Schatten sehr dunkel und sieht am rechten und unteren Rand aus wie abgeschnitten. Was habe ich falsch gemacht?

das Bild ganz unten
Laborbeagle Balu
Balu - verstorben am 23.05.2013
Bonnie - verstorben am 07.03.2018
-----------------
NOF 15
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Da kann man viel ausprobieren:
{box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.5), 0 12px 40px 0 rgba(0, 0, 0, 0.4);}
http://www.cssmatic.com/box-shadow
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Moin,

der Schatten geht ja quasi nach außen, d.h. das Objekt muss zur Darstellung des Schattens auch genug Platz haben, um nicht "abgeschnitten" zu erscheinen.

Setze mal einen Innen-Abstand (padding), am Zahnrad, oben und unten dazu.

Beispiel am Firefox "Inspektor" erstellt:


.jpg  padding.jpg (Größe: 625,13 KB / Downloads: 22)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Danke für Eure Tipps. Probiere ich aus.
Laborbeagle Balu
Balu - verstorben am 23.05.2013
Bonnie - verstorben am 07.03.2018
-----------------
NOF 15
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Support? stobi_de 9 179 15.07.2018, 08:43
Letzter Beitrag: stobi_de
  Mobirise-Handyman AMP Bild/Text Anordnung Thomas Saake 13 284 14.07.2018, 12:54
Letzter Beitrag: Tommy Herrmann
  Mobirise- Handyman AMP Textfarbe Thomas Saake 13 213 11.07.2018, 07:41
Letzter Beitrag: Tommy Herrmann
  Mobirise Ende (für uns)? stobi_de 13 483 09.07.2018, 06:12
Letzter Beitrag: AndyNeu
  BILDER FÜR EBOOK-READER IN PDF EXPORTIEREN (SEITENGRÖSSE, DP)? jolanta12 3 91 07.07.2018, 17:30
Letzter Beitrag: barbara0701
  Mobirise-WOW Slider Thomas Saake 2 108 03.07.2018, 11:43
Letzter Beitrag: Thomas Saake
  Mobirise Impressum stobi_de 1 96 29.06.2018, 14:49
Letzter Beitrag: Tommy Herrmann
  Mobirise - Tutorials "getting started"? Beatrix53 12 193 29.06.2018, 07:33
Letzter Beitrag: Rancher
  Mobirise-Cookie Alert auf jeder Seite? Thomas Saake 4 136 26.06.2018, 13:07
Letzter Beitrag: Thomas Saake
  Google Web Fonts in Mobirise 3 lokal hosten C. Schulz 9 264 24.06.2018, 23:00
Letzter Beitrag: C. Schulz



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!