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.3.0
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: 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

---------------------------
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: 21)
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 Thema AgencyM4 und IE11 Tommy Herrmann 9 211 Vor 37 Minuten
Letzter Beitrag: Tommy Herrmann
Question Mobirise Menu in IE11 nicht darstellbar Fewo 36 645 21.10.2017, 12:59
Letzter Beitrag: Tommy Herrmann
  Mobirise-Einzelnen Menüpunkt mit Passwort versehen Thomas Saake 24 314 20.10.2017, 13:08
Letzter Beitrag: Tommy Herrmann
  Wie Visual Lightbox in Zeiten von Mobirise lizensieren? trainspotter 24 487 19.10.2017, 15:52
Letzter Beitrag: trainspotter
  Mobirise 4.3.4 nach Installation Absturz Inka 6 128 17.10.2017, 12:21
Letzter Beitrag: Tommy Herrmann
  Fehler in Mobirise -Agency4 c-laus 7 139 16.10.2017, 19:34
Letzter Beitrag: Tommy Herrmann
  Mobirise 4 Tommy Herrmann 81 2.882 16.10.2017, 11:49
Letzter Beitrag: Thomas Saake
  Mobirise PortfolioM4 Tommy Herrmann 3 137 15.10.2017, 12:39
Letzter Beitrag: Tommy Herrmann
  Instalationsprobleme Mobirise Agent-Smith 7 134 11.10.2017, 18:46
Letzter Beitrag: Martin73
  Mobirise - NOF-Website "übernehmen" alfgei 8 230 09.10.2017, 21:16
Letzter Beitrag: alfgei



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!