[zoranaronParticipant]

I am using this code to create the effect I want but found that the size was too big on mobile and I also would prefer that it be h1 for header reasons. When I changed it from h2 to h1 I lost the 3d effect. Why and how would I fix this? I will probably add font-size also

Thanks

h2 {
font-size:40px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15) ;
}

[zoranaronParticipant]

This reply has been marked as private.

[zoranaronParticipant]

One other question that kinda goes along these lines. When I am editing text and I make something h1 or other header, it quite often changes the whole paragraph. How do I stop this from happening?

Thanks,
zora

[LelyModerator]

Hello Zora,

Based on the style declaration above it will only work for h2. And every time you use H2 tag it will be show the 3d effect. The best way to declare that is assign to CSS class like below:

.three-d-effect {
font-size:40px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15) ;
}

Then to use that class assign it your header like below:

<h1 style="text-align: center;"  class="three-d-effect">MountainViewWeb<br>
Web Design for the Laurel Highlands</h1>

OR

<h2 style="text-align: center;"  class="three-d-effect">MountainViewWeb<br>
Web Design for the Laurel Highlands</h2>

OR

<p style="text-align: center;"  class="three-d-effect">MountainViewWeb<br>
Web Design for the Laurel Highlands</p>

By assigning the style to class you can use different header tag like H1, H2, H3 or even on paragraph <p> tag.

About your last question, it is changing because every tag have different style like font size. H1 has the biggest font size it goes smaller on H2 or H3. So when the paragraph is rendered it will adjust, either be smaller or bigger depending on the tag. If this is not the issue, please give us more information on how the whole paragraph is changing and also give us the specific link where this happens.

Thank you.

[zoranaronParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

This is the default behaviour of WordPress editor. By pressing Shift+Enter it only adds a line break to the opened tag, i.e., heading or paragraph (see: http://prntscr.com/7817xa). So, you should simply press enter instead to separate heading tag with paragraph.

Thanks!

[zoranaronParticipant]

So then you have to code of single line return and header wrapped in text.

[zoranaronParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Zoran,

Unfortunately, I didn’t understand your last response: “So then you have to code of single line return and header wrapped in text.” Would you mind providing us with some clarification on it?

Thanks.

[zoranaronParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Yes, you should switch to text mode to add class or tag to specific part of your text.

Thanks.

[Author]

Posts