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

-----------------
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.5.2, 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

-----------------
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

-----------------
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

-----------------
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

-----------------
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-Textformatierung Thomas Saake 9 136 Vor 1 Stunde
Letzter Beitrag: Tommy Herrmann
  Mobirise - plötzlich alle Projekte weg barbara0701 29 259 Vor 2 Stunden
Letzter Beitrag: c-laus
  Mobirise 4 Tommy Herrmann 172 6.810 Gestern, 22:53
Letzter Beitrag: barbara0701
  Textpassagen in Mobirise formatieren Tommy Herrmann 17 152 Gestern, 16:46
Letzter Beitrag: Rancher
  Bilder der Website von Mobirise werden nicht angezeigt nur der Text mobikfx750 29 235 Gestern, 15:18
Letzter Beitrag: Martin73
Exclamation Mobirise Themen Updates Tommy Herrmann 0 36 Gestern, 13:53
Letzter Beitrag: Tommy Herrmann
  og:image für Facebook in Mobirise barbara0701 2 58 16.01.2018, 13:17
Letzter Beitrag: Tommy Herrmann
  Mobirise blendet sich selbst ein stobi_de 4 98 13.01.2018, 19:49
Letzter Beitrag: Tommy Herrmann
  Bilder zuschneiden in Mobirise barbara0701 5 112 13.01.2018, 18:20
Letzter Beitrag: barbara0701
  Mobirise PortfolioM4 - Block Clients barbara0701 9 147 13.01.2018, 12:16
Letzter Beitrag: barbara0701



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!