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 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.3.5
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!
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

---------------------------
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!
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: 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-Grafik oder Foto als Hintergrund über die ganze Seite Thomas Saake 11 170 Vor 31 Minuten
Letzter Beitrag: Martin73
  Mobirise 4 Tommy Herrmann 103 3.861 17.11.2017, 10:48
Letzter Beitrag: Tommy Herrmann
  Mobirise-Tables Sortierfunktion entfernen Thomas Saake 28 404 14.11.2017, 20:55
Letzter Beitrag: Martin73
  Mobirise-Countdown korrekt einstellen Thomas Saake 5 97 14.11.2017, 12:32
Letzter Beitrag: Tommy Herrmann
  Mobirise-Farbverlauf über die ganze Seite Thomas Saake 19 567 13.11.2017, 15:19
Letzter Beitrag: Thomas Saake
  Mobirise und seine Icons stobi_de 2 110 11.11.2017, 12:28
Letzter Beitrag: Thomas Saake
  Mobirise-Text verschiebt sich auf Smartphone Thomas Saake 3 77 10.11.2017, 11:27
Letzter Beitrag: c-laus
  Mobirise-Textgröße Smartphone Thomas Saake 14 218 07.11.2017, 15:10
Letzter Beitrag: Tommy Herrmann
  Mobirise 4 - das GLOBAL Attribut ? stobi_de 25 428 07.11.2017, 11:46
Letzter Beitrag: Tommy Herrmann
  Mobirise - eine Alternative zu NOF? Ralf-HH 17 340 07.11.2017, 08:42
Letzter Beitrag: Rancher



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!