Guide: CSS3 and PHP

We have compiled a new guide to CSS3 and PHP for you. On the one hand, we show you how to use CSS3 to implement cross-platform reflections. On the other hand, we’ll show you how to fill a newly discovered PHP security gap.


CSS3 and PHP - cross-platform reflections


When it comes to implementing reflections and similar effects without the use of images, many web designers prefer the easiest way, and this is by using proprietary features such as -webkit-box-reflect: and -webkit-mask-image: for webkit browsers . But this concept has the clear disadvantage that it enforces the use of Google Chrome or Apple Safari, leaving browsers with a different rendering engine out. Completely unnecessary, because it is also different. If you want to support Altbrowser from the IE family, you can distinguish it from the use of conditional comments from modern browsers.


Guide: CSS3 and PHP - New security holes in PHP stuff





To simulate mirroring effects with respect to a text in CSS3, two identical text sections are required each


The Internet Magazine span> span> div> div> div>

The corresponding stylization rules (for example, stylesheet style.css) might look like this:


#flaeche {padding-top: 5%; left: 0; top: 10%; width: 100%; bottom: 0; position: absolute; overflow: hidden

The element still has no background, because this is to include the mirroring. The overflow property is used to keep the upper area in black color, thus enhancing the reflection. With the following source text, both a reflecting element and the reflection itself are generated


# View, #refact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 50px; background-color: #FFE; -weight: bold; padding: 30px; display: inline block; border radius: 30px; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, inset rgba (0,0,0, .8) 0 0 20px; border-radius: 10px; position: relative; -webkit-user-select: none; -moz-user-select: none; ; User-select: none


In this way, two superimposed large buttons have been created. The second button is now to be mirrored along the vertical axis (that is, across the horizontal axis)


#reflection {position: absolute; z-index: -1; top: 100%; left: 0; -webkit-transform: scaleY (-1); ScaleY (-1); ms-transform: scaleY (-1); transform: scaleY (-1); - webkit filter: blur (2px); / * webkit only * / / * filter: url (filter.svg #blur); * / / * Firefox, Opera and IE10 * / -webkit-box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px; -moz-box- Shadow: inset rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px; box shadow: inset rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px


A softening filter is used as an icing. Unfortunately, the blur filter of Webkit is not crossbrowserfähig and so it is, to the implementation of a blur deeper into the trick box to grasp. The easiest way to implement the blur effect in Firefox, Opera, and Internet Explorer 10 is to use a softening filter mask (in the example filter.svg), as follows:


Xml version = "1.0" standalone = "no"?>


In the rule set for selector mirroring, you can now remove the comment signs from the filter rule for Firefox, Opera and IE 10


Filter: url (filter.svg # blur); / * Firefox, Opera and IE10 * /


The next step is to make the reflection seem more believable by the use of transparency and to solve the problem of browser compatibility. For example, the following code
performs these two tasks

Modern = mirroring margin-top: 20px; margin-left: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft .Blur (PixelRadius = '3', MakeShadow = 'false') progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = ): Altloads #spiegelung {margin-top: -20px; margin-left: -7px; filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage Mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = 'false') progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid : DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = 'false')


A vulnerability of the PHP interpreter, which has existed for eight years, could jeopardize the security of your web server. By appending the -s string to a valid URL, an attacker can spy on the code of the scripts used in older versions of the PHP interpreter. To determine if your site might be affected by an attack of this type, visit the URL of the site in question in a browser and attach the string to it, for example

Http://www.internet-magazin.de?-s


If the browser renders the page undisturbed when you call such a modified URL, you are immune to this attack. However, if you get an insight into the source code when calling such a modified URL, the affected site is vulnerable. In this case, you should get the PHP interpreter up-to-date to protect the server from attack.