Welcome to Lutheran High School North (LHSN), home of the Crusaders!
Lutheran North is a co-educational, private Christian school serving 300 students in grades 9 through 12 who live in the St. Louis metropolitan area. Our students achieve, believe and belong as we prepare them academically, spiritually and holistically for future success.
At LHSN, we embrace both diversity and individuality. We are an inclusive school, welcoming students from various Christian, socio-economic, academic, racial and ethnic backgrounds. We blend a strong college-prep curriculum with opportunities for service, co-curricular and athletic activities to help our students mature and grow as young Christians.
Lutheran North is a diverse community in many ways. Our student body includes American and international students with diverse ethnicity and cultural backgrounds. Within our Crusader community, there is also diversity in our Christian faith backgrounds, with our families attending many different churches throughout the St. Louis area. Some of our families need help affording tuition; we offer scholarships and financial aid to make it possible to attend Lutheran North.
Using CSS Transforms and Transitions you can create a card flip effect on Downloads, Links, Lists, News and Events Blocks.
Block Style Setup
Display
Transitions
What's Happening
Group (<li class="group">) is the origin of the transform. Long Description is the backside. Long Description is stretched to fill its parent, Group, and then hidden using opacity. On Group's hover state Group is rotated to reveal its backside.
The flip effect is an illusion. Long Description is not on the back of Group. Rather, Long Description is hidden with opacity and halfway through the transition it is revealed and Title and Brief Description are hidden.
Notes on Easing Functions
The opacity transitions are instant but have a delay. For the illusion to work opacity change halfway through the transition. Otherwise the illusion will break.
To use a different easing function the following must be true. The transition completion must be at 50% when the transition is halfway elapsed. The transition must never be more than 50% complete before the halfway mark or less than 50% complete after the halfway mark.
CSS Animations is required to use an easing function that doesn't fit these requirements. The keyframes must be percentages and correspond with the percent completion on the cubic-bezier curve.
Block Style Setup
Display
- Set the display property on the Group selector to inline-block
- Set a width and height on Groups
- Set the Groups to position: relative
- Set the Long Description to position: absolute;
- Give the Long Description a width and height of 100%
- Position the Long Description in the top-left corner of its parent
- Set the opacity of the Long Description to 0
- Add a transform and opacity transition to Group, Title, Brief Description and Long Description
- Add the desired transform to Group's hover state
Transitions
- Add opacity: 0 to Title (.style-XXXX .group:hover h4) and Brief Description (.style-XXXX .group:hover .brief-description) on Group's hover state
- Add opacity: 1 and the desired transform to the Long Description (.style-XXXX .group:hover .long-description) on Group's hover state
What's Happening
Group (<li class="group">) is the origin of the transform. Long Description is the backside. Long Description is stretched to fill its parent, Group, and then hidden using opacity. On Group's hover state Group is rotated to reveal its backside.
The flip effect is an illusion. Long Description is not on the back of Group. Rather, Long Description is hidden with opacity and halfway through the transition it is revealed and Title and Brief Description are hidden.
Notes on Easing Functions
The opacity transitions are instant but have a delay. For the illusion to work opacity change halfway through the transition. Otherwise the illusion will break.
To use a different easing function the following must be true. The transition completion must be at 50% when the transition is halfway elapsed. The transition must never be more than 50% complete before the halfway mark or less than 50% complete after the halfway mark.
CSS Animations is required to use an easing function that doesn't fit these requirements. The keyframes must be percentages and correspond with the percent completion on the cubic-bezier curve.
| Block Style | ||
|---|---|---|
/* -- Group -- */ /* -- normal -- */ background-color: #eee; border-radius: 5px; display: inline-block; height: 240px; padding: 10px; position: relative; -webkit-transition: -webkit-transform 500ms linear; transition: transform 500ms linear; width: 240px; z-index: 1; /* -- hover -- */ /* rotate of x-axis */ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); /* rotate of x=y axis */ -webkit-transform: rotate3d(-2,1, 0,-180deg); transform: rotate3d(-2,1, 0,-180deg); /* rotate of y-axis */ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); |
/* -- Title -- */ /* -- normal -- */ box-sizing: border-box; height: 25%; left: 0; opacity: 1; padding: 10px; position: absolute; top: 0; -webkit-transition: opacity 0 250ms linear; transition: opacity 0 250ms linear; width: 100%; /* -- Brief Description -- */ /* -- normal -- */ box-sizing: border-box; height: 75%; left: 0; opacity: 1; padding: 10px; position: absolute; top: 25%; -webkit-transition: opacity 0 250ms linear; transition: opacity 0 250ms linear; width: 100%; |
/* -- Long Description -- */ /* -- normal -- */ background-color: #eee; box-sizing: border-box; height: 100%; left: 0; opacity: 0; padding: 12.5% 10px; position: absolute; top: 0; -webkit-transition: transform 500ms linear, opacity 0 250s linear; transition: transform 500ms linear, opacity 0 250ms linear; width: 100%; |
| Custom CSS | ||
/* Title & Brief Description */
/* -- hide when the group rotates -- */
.style-10212 .group:hover h4,
.style-10212 .group:hover .brief-description {
opacity: 0;
}
/* -- Login Description -- */
/* -- rotate the long description with the group so it's visible -- */
.style-10212 .group:hover .long-description {
opacity: 1;
/* rotate of x-axis */
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
/* rotate of x=y axis */
-webkit-transform: rotate3d(-2,1, 0,-180deg);
transform: rotate3d(-2,1, 0,-180deg);
/* rotate of y-axis */
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Long Description - Rotate X = Y */
/* -- Hide the rotated backface because it rotates differently -- */
.style-10212 .group:nth-child(2){
-webkit-transition: transform 500ms linear, background-color 0 250ms linear;
transition: transform 500ms linear, background-color 0 250ms ;
}
.style-10212 .group:nth-child(2):hover {
background-color: transparent;
}
|
||
Here starts the page content area
List of 3 items.
-
List Item One
Brief Description with bold tag Brief Description Brief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionBrief DescriptionRead More -
List Item Three
Read MoreLorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas libero. Curabitur erat. Curabitur vestibulum neque ut est. Nam bibendum mauris non magna. Ut commodo, mauris in dapibus ultrices, dolor nisl vestibulum pede, id sollicitudin odio pede in felis. Nunc magna augue, tincidunt sed, interdum ac, laoreet et, enim. Aenean metus. Sed pellentesque congue mauris. In pulvinar. Cras laoreet imperdiet pede. Sed interdum. Maecenas laoreet, justo quis vehicula imperdiet, magna tortor sollicitudin velit, vel scelerisque justo massa eu est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur aliquam leo sit amet sem. Quisque ultrices tincidunt tellus. Pellentesque venenatis mattis enim. Nam imperdiet malesuada purus. Nunc et nisl vel ante pellentesque ultrices. -
List Item Two
Read MoreLorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas libero. Curabitur erat. Curabitur vestibulum neque ut est. Nam bibendum mauris non magna. Ut commodo, mauris in dapibus ultrices, dolor nisl vestibulum pede, id sollicitudin odio pede in felis. Nunc magna augue, tincidunt sed, interdum ac, laoreet et, enim. Aenean metus. Sed pellentesque congue mauris. In pulvinar. Cras laoreet imperdiet pede. Sed interdum. Maecenas laoreet, justo quis vehicula imperdiet, magna tortor sollicitudin velit, vel scelerisque justo massa eu est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur aliquam leo sit amet sem. Quisque ultrices tincidunt tellus. Pellentesque venenatis mattis enim. Nam imperdiet malesuada purus. Nunc et nisl vel ante pellentesque ultrices.Suspendisse eget nisl dapibus enim eleifend venenatis. Proin molestie condimentum sapien. Quisque cursus, neque in pretium euismod, orci felis accumsan libero, gravida euismod turpis erat in nunc. Morbi vitae sem. Praesent laoreet. Nunc sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus congue eros sed dolor. Quisque nunc dui, adipiscing consequat, vulputate blandit, eleifend vitae, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nec nisl et neque pharetra molestie. Mauris commodo dolor ac velit. Ut orci. Curabitur massa turpis, ultrices non, sollicitudin in, ultrices at, odio. Donec quis erat vitae tortor dictum suscipit. Aenean vel mi vel libero pellentesque imperdiet. Donec dapibus, dui a commodo auctor, dui pede molestie metus, ut lacinia purus mi vitae nisl.
List of 2 news stories.
Archive
You can paste Chinese characters directly in the HTML editor (HTML view, not text view) and it will convert the characters to unicode characters - i.e. 安妮·賴.
If you need to get the unicode characters directly, you can go to: http://rishida.net/tools/conversion/
If you want to enter a header for a block, you cannot use the header field for the block - it only accepts text and will print out Chinese characters as ???. Alternatively, you can use an embed widget and write the header tag you wish to use and paste the unicode (not Chinese) characters within the header tag. Example: <h2>安妮·賴</h2>
安妮·賴特學校是兩所學校在一個校園裡。安妮·賴特走讀學校通過8級供應男孩和女孩在幼兒園，而安妮·懷特上學校提供的全女生走讀和寄宿計劃為9年級至12安妮·懷特很自豪能夠成為一個國際文憑世界學校，成立於1884年，安妮·賴特學校坐落在華盛頓州塔科馬市的美麗北端附近。我們的歷史悠久的校園包括一個室內游泳池，兩個健身房，科技實驗室，藝術和音樂工作室，戲劇，戶外園林，遊樂區，運動場和空地。
If you need to get the unicode characters directly, you can go to: http://rishida.net/tools/conversion/
If you want to enter a header for a block, you cannot use the header field for the block - it only accepts text and will print out Chinese characters as ???. Alternatively, you can use an embed widget and write the header tag you wish to use and paste the unicode (not Chinese) characters within the header tag. Example: <h2>安妮·賴</h2>
安妮·賴特學校是兩所學校在一個校園裡。安妮·賴特走讀學校通過8級供應男孩和女孩在幼兒園，而安妮·懷特上學校提供的全女生走讀和寄宿計劃為9年級至12安妮·懷特很自豪能夠成為一個國際文憑世界學校，成立於1884年，安妮·賴特學校坐落在華盛頓州塔科馬市的美麗北端附近。我們的歷史悠久的校園包括一個室內游泳池，兩個健身房，科技實驗室，藝術和音樂工作室，戲劇，戶外園林，遊樂區，運動場和空地。