This is the example page of the article on Onyx Design Weblog about designing initials with CSS, click here to go to the article. The trick is the :first-letter pseudo element. It targets the first letter of an element, the <p> element in this case. I used this image from Wipemedia Commons for the background image of the initials.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi id metus sit amet sapien rhoncus ullamcorper. Donec posuere felis vel ipsum faucibus adipiscing. Donec justo mi, facilisis eget, malesuada vel, consectetuer in, mauris. Curabitur justo. Etiam massa lacus, malesuada a, porttitor nec, posuere luctus, eros. Phasellus consequat magna ac urna. Morbi id elit et sapien bibendum tempus. Aliquam erat volutpat. Praesent sed ante. Vivamus convallis. Nunc turpis est, gravida quis, pretium ac, viverra tempor, felis. Cras pretium pellentesque lorem. Aenean rhoncus. Donec molestie, leo interdum fermentum auctor, enim nibh pharetra sem, non dignissim augue nibh in nisi. Etiam varius. Nulla nulla sapien, accumsan ut, faucibus ac, vulputate nec, nulla. In posuere diam eget est. Nam semper blandit eros. Aliquam luctus, elit id ornare ornare, justo tellus consectetuer enim, vitae iaculis sapien nibh ut ipsum. Morbi commodo. Donec sit amet lorem non diam sodales placerat. Nam dapibus, sapien sit amet malesuada elementum, nisi elit rutrum orci, non accumsan purus elit non enim. Ut iaculis nunc quis leo. Mauris tempus lorem vel est. Ut velit. Sed erat. Pellentesque fermentum pellentesque nulla. Praesent ut mauris.
Nullam dapibus, nulla a scelerisque iaculis, nisl magna cursus risus, eu malesuada mauris arcu vitae urna. Sed dignissim vulputate elit. Integer ipsum. Ut neque odio, gravida id, pulvinar id, fermentum non, nisi. Morbi volutpat. Donec ultrices ultrices massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tempor venenatis ipsum. Nam mattis. Quisque a tortor nec lacus accumsan egestas. Suspendisse turpis. Donec dignissim gravida justo. Nam ac ante. Fusce imperdiet magna ac nisi. Maecenas aliquam urna a dolor. Morbi ac turpis.
Donec vehicula lacinia lectus. Curabitur facilisis urna eget justo. Donec tortor tellus, accumsan in, cursus vel, tempus at, magna. Nullam pede risus, mattis eu, semper in, feugiat ac, est. Ut dolor risus, commodo id, facilisis ac, dignissim nec, risus. Nulla tortor velit, ultrices nec, blandit in, mollis vitae, ipsum. Donec pellentesque lacus at nulla. Aliquam ultrices purus ut dui. Etiam placerat varius massa. Vivamus vulputate sem in sem. Cras sem odio, placerat sed, suscipit eget, posuere et, libero. Praesent id libero. Vivamus ultricies, justo eget vestibulum posuere, metus nulla convallis mauris, at sodales leo lectus in dolor. Donec eget dolor eu metus suscipit tempus. Duis nec justo non lorem tincidunt pellentesque. Vestibulum porttitor. Maecenas arcu erat, luctus at, venenatis sed, ultricies in, mi. Maecenas at erat at enim cursus mollis. Etiam rhoncus, velit sed faucibus vulputate, velit odio interdum erat, luctus porta sapien risus id magna. Sed sed magna. Vivamus in sem sit amet velit congue ullamcorper. Ut suscipit varius elit. Quisque volutpat volutpat purus. Integer egestas velit nec nulla fermentum vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Etiam feugiat. Quisque semper ipsum.
