Teszt

kiir

old
din2
dinweb
graf
image
pdf
pr1
ajaxdemo
button
cddat1
cikl1
date
pi
szam1
szam1Boda István html-css oktató oldala

CSS Max-width

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

Image Transparency

The opacity property specifies the transparency of an element. The lower the value, the more transparent:

Image with 98% opacity:

• atcg.hu
• Teszt
• építészet
• tartószerkezet/a>
• épületszerkezet
• építőanyag
• és_minden_egyéb

Note: We use href="#" for test links. In a real web site this would be URLs.

JavaScript Maps

The new Map Method()

Creating a map from an array:

Hoverable Dropdown

Move the mouse over the text below to open the dropdown content.

Go Back

JavaScript HTML DOM

Changing the HTML style:

Hello World!

Hello World!

The mask-image Property

An image with a mask layer image:

Original image:

padding: 8px 16px; text-decoration: none; }

Simple Pagination

The resize Property

The resize Property

Flexible Boxes

Try to resize the browser window.

A container with "flex-wrap: nowrap;" will never wrap its items.

Note: Flexbox is not supported in Internet Explorer 10 or earlier versions.

Create a Flex Container

Flexible Items

All direct children of a flexible container becomes flexible items.

A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements(s) of the flexible container automatically becomes flexible items.

CSS Template using Float

In this example, we have created a header, three unequal columns and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

CSS Template using Flexbox

In this example, we have created a header, three unequal columns and a footer. On smaller screens, the columns will stack on top of each other. Resize the browser window to see the responsive effect.

Note: Flexbox is not supported in Internet Explorer 10 and earlier versions.

CSS Template using Grid

In this example, we have created a header, three unequal columns and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

Note: The Grid Layout Module is not supported in Internet Explorer or Edge 15 eand earlier versions.

Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

mit írjak jót?és mást, szépet,

ír

és már jó lesz ez ő?

atcg.hu