Impressum Suchfunktion

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

---------------------------
bisher NOF 15, jetzt Mobirise
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 51.0.1,6234 Java 7 32bit, IE10, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.1.4
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

---------------------------
bisher NOF 15, jetzt Mobirise
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!
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: 19)
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

---------------------------
bisher NOF 15, jetzt Mobirise
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

---------------------------
bisher NOF 15, jetzt Mobirise
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!
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: 20)
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

---------------------------
bisher NOF 15, jetzt Mobirise
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: Fotos in Galerie einbinden / Bug struggle 1 17 Vor 3 Stunden
Letzter Beitrag: barbara0701
  Mobirise - Fotos einfügen Gronibeagle 16 234 Heute, 00:03
Letzter Beitrag: Gronibeagle
  Mobirise- Icons mit Text enger zusammen Thomas Saake 3 62 Gestern, 21:24
Letzter Beitrag: Martin73
  Opacity des Mobirise-Hintergrund Martin73 17 166 Gestern, 17:38
Letzter Beitrag: Martin73
  Mobirise - Probleme mit der Standard-Fotogalerie WRH 11 206 Gestern, 16:11
Letzter Beitrag: struggle
  Mobirise 4 Tommy Herrmann 36 878 18.08.2017, 17:29
Letzter Beitrag: Tommy Herrmann
  Mobirise in deutsch Rancher 2 81 17.08.2017, 17:30
Letzter Beitrag: Rancher
  Mobirise 4.1.5 lope 18 335 17.08.2017, 13:35
Letzter Beitrag: Tommy Herrmann
  Mobirise-Abstand zwischen zwei Blöcken Thomas Saake 7 157 16.08.2017, 15:01
Letzter Beitrag: Thomas Saake
  Mobirise - Start WRH 5 127 16.08.2017, 10:43
Letzter Beitrag: WRH



Benutzer, die gerade dieses Thema anschauen: 2 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!